今回はクラスコンポーネントの特徴であるライフサイクルについて、実際の動作を確認しながら見ていきます。

Contents

コンポーネントのライフサイクル

Reactのコンポーネントにはライフサイクルがあります。

ライフサイクルとはコンポーネント内で起きている「時間の流れ」を指します。

大きく分けて3つの期間があり、

  • Mounting（配置期間）
  • Updating（変更期間）
  • Unmounting（破棄期間）

それぞれの期間で必要な処理を行いたい場合に、ライフサイクルメソッドが必要になります。

Mounting

Webページへアクセスした時など、UIがコンポーネントに配置される期間になります。

最初に表示される時の1度だけ実行されます。

使えるメソッド

  • constructor()
  • getDerivedStateFormProps()
  • render()
  • componentDidMount()

Updating

ユーザの操作など、コンポーネントのデータやUIが変更される期間になります。

propsまたはstateの更新をトリガーに何度でも実行されます。

使えるメソッド

  • getDerivedStateFormProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Unmounting

別のWebページへ遷移する前など、現在のコンポーネントを破棄するための期間になります。

破棄される時の一度だけ実行されます。

使えるメソッド

  • componentWillUnmount()

ライフサイクルを使う時

Reactコンポーネントの外に影響を与えるような関数を記述する時はライフサイクルを使います。

  • 仮想DOMの内容を変更。
  • データベースとAPI通信。
  • ログ出力。
  • setState()でstateを変更。

などを適切な場所のライフサイクルに記述します。

主要なライフサイクルメソッド

  • constructor()
  • componentdidMount()
  • render()
  • componentDidUpdate()
  • componentWillUnmount()

この5つが主要なライフサイクルメソッドで、最低限覚えておくべきものです。

render()以外はオプションのため省略が可能です。

constructor()

constructor()

■ Mounting時
stateの初期化時に実行されます。

実行するとconstructor()内のstateが初期化され、「stateが初期化されました。」が表示されます。

componentDidMount()

componentDidMount()

■ Mounting時
最初のrender()が呼ばれた後の1度だけ呼ばれます。

リスナーの設定やAPI通信に使われます。

componentDidMount()内で3秒後にmessageMountFunc()が実行されて、「componentDidMountが実行されました。」が表示されます。

render()

render()

■ Mounting / Updating時
仮想DOMを描画する時に使われます。

2回目以降のrender()はupdating時になります。

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

■ Updating時
再render()後に呼ばれます。

  • 第一引数に1つ前のprops
  • 第二引数に1つ前のstate
  • 第三引数にsnapshot

引数は省略できます。

スクロールイベントや条件付きイベントで使われます。

setState()を実行するときは、条件無しだとループするので条件を設定をします。（レンダリング→setState()→レンダリング→setState()...）

componentDidMount()が実行されると再レンダリングされるので、componentDidUpdate()が実行できるようになり、「Count Up」ボタンをクリックするとカウントアップすることができます。

componentWillUnmount()

componentWillUnmount()

■ unMounting時
現在のコンポーネントを破棄する直前に呼ばれます。

リスナーの解除やリソースを開放するために使われます。

レンダリングされないので、setState()は呼べません。

目視はできませんが、componentWillUnmount()内でremoveEventListenerをすることでリスナーが解除されリソースが開放されます。

まとめ

  • ライフサイクルにはMounting,Updating,Unmountingの期間がある。
  • 主要なメソッドはconstructor(),componentDidMount(),render(),componentDidUpdate(),componentWillUnmount()の5種類。
  • ライフサイクルメソッドはrender()以外はオプションのため省略可能。
  • componentDidUpdate()内でsetState()を実行するときは、そのままだと無限ループしてしまうので条件を設定する。

さいごに

以上、ライフサイクルについてでした。

まずはクラスコンポーネントで主要なライフサイクルを使いこなせるようになることが大切ですね。

ただ関数コンポーネントでもライフサイクルイベントに似た機能のReact Hooksがあるので、そちらについてはまた今度まとめたいと思います。

参考