【 React Native】ライフサイクルを調べてみた

ロナえるの夫です。

最近仕事でReact Nativeを扱うことになったので、ライフサイクルをまとめてみました。

ライフサイクル

React Nativeにはライフサイクルは大きく分けて３つのフェーズに分かれます。

マウント時は、あるページが読み込まれた時

更新時は、そのページが更新された時

マウント解除時は、ページを離れた時

になります。

そして、その各フェーズに紐づいて５つのイベント（関数）があります。

これらの挙動に関して、これから実際の動作を見ながら確認していきたいと思います。

サンプルコード

まずは挙動を確認するためのサンプルコード見ていきましょう。

３つのボタンがあり、できることは次の通りです。

実際に触ってみてください。

サンプルコードでは、今回着目している関数で下記のようなログを吐くようにしています。

Test: 関数名

ログを確認するには、コンソール画面を表示する必要があります。

それには下部の「Console」をクリックしてください。

すると、コンソール画面が出てくるので、ここでログを確認していくことができます。

CodeSandbox絡みのボタンがコンソールとかぶっていて、見づらいですがご了承ください。

CodeSandboxとは、コードや実行結果を表示させているサービス

またコードを確認したい方は、左手に見える白い線をクリックしながら右にドラッグしてもらうと、コードも確認できます。

今回は、「Test Screen」を表示させている「Test.tsx」のライフサイクルを確認していきたいと思います。。

では、各関数について見ていきましょう。

constructor

constructorは初期化関数です。

  constructor(props: TestProp) {
    super(props);
    console.log("Test: constructor");
  }

プログラミングで「Class」を作ったことがある方は馴染みが深いと思います。

今回のケースだと、「カウンターの値」と「Test Screenの表示・非表示」を管理する変数をそれぞれ初期化しています。

また、実行されるタイミングは、マウント時でライフサイクルの中では一番最初に呼ばれます。

ログでは、確かに一番最初に表示されますね。

render

次に、呼べれるのが「render」関数です。

  render() {
    console.log("Test: render")
    return <Text style={styles.text}>Test Screen</Text>;
  }

こちらは、画面にコードの結果を出力していく関数になります。

なので、returnには表示したい画面を「jxs」で記述します。

jxsとは、HTMLを少しリッチにしたようなものです。

こちらも起動時に実行されるので、何もしなくてもログが出力されます。

また、起動時だけでなく、更新時にも再描画する必要があるので、render関数は呼ばれます。

componentDidMount

起動時に自動で実行される関数としては、最後に「componentDidMount」が呼ばれます。

  componentDidMount() {
    console.log("Test: componentDidMount");
  }

画面の表示が終わったタイミングで表示されます。

こちらの関数からは、実際に表示された画面の情報を使って処理することができます。

componentDidMountも何もせずにログが出力されたと思います。

componentDidUpdate

componentDidUpdateは、更新時に呼ばれる関数です。

  componentDidUpdate() {
    console.log("Test: componentDidUpdate");
  }

componentDidMountと同様に、render関数が呼ばれて画面が描画された後に呼ばれます。

今回のケースだと、「+1」ボタン／「-1」ボタンで確認できます。

「+1」ボタン／「-1」ボタンをクリックすると

「カウント：N」

の「N」の部分がカウントアップ/カウントダウンしていきます。

そのタイミングで画面が更新されるので、renderとcomponentDidMountは実行されます。

カウントの文字自体はTest.tsxを持つApp.tsxに属していますが、その更新でTestモジュールも更新されるんですね。

componentWillUnmount

最後に、componentWillUnmountです。

  componentWillUnmount() {
    console.log("Test: componentWillUnmount");
  }

componentWillUnmountは、画面が破棄される（非表示）直前に実行されます。

今回のケースだと、「visible/invisible」ボタンで確認できます。

「invisible」ボタンを押すと「Test Screen」の文字が消え、ボタンの文字が「visible」に変わります。

「visible」ボタンを押すと、もう一度「Test Screen」の文字が現れます。

こちらの画像だと、constructorやrenderも表示されていますが、実際には「Test Screen」を非表示にしたときは、「componentWiiUnmount」のみ表示されます。

ログの見やすさのため、何度か表示・非表示を繰り返しています。

また、「Test Screen」の文字が消えている時は、Testモジュール自体が非表示となっています。

        <TouchableOpacity style={styles.button} onPress={this.change}>
          <Text>{this.state.visible ? "invisible" : "visible"}</Text>
        </TouchableOpacity>

そのため、「+1/-1」ボタンを押してもcomponentDidUpdateが呼ばれません。

まとめ

今回は実際の動作を確認しつつ、ライフサイクルについて知ることができました。

この辺間違っているよというのがあれば、コメントください！