🏐

Reactの基礎【ライフサイクル】

2 min read
JavaScript
React
tech

Reactの基礎 【ライフサイクル】

React第４弾です。
今回はReactのライフサイクルについてまとめました。

ライフサイクルとは...?

ライフサイクルとは、Reactのコンポーネントが生まれてから成長し、最終的に死ぬまでの一連の過程のことを表します。ここでもう少しプログラム的に説明すると以下のように言い換えられます。

  • コンポーネントが生まれる
    • コンポーネントが生成されて、レンダリングされるまでの期間。（＝Mounting）
  • コンポーネントが成長する
    • コンポーネントの管理するデータがユーザによって更新される期間。（＝Updating）
  • コンポーネントが死ぬ
    • コンポーネントが不要となり破棄するための期間。（＝Unmounting）

各ライフサイクルでは、その期間で使用できるメソッドであるライフサイクルメソッドが用意されています。主要なメソッドのみを記載したライフサイクルのイメージ図を以下に示す。


Reactのライフサイクルイメージ

  • Renderステージ
    • 副作用を持たず、Reactによって、一時停止、中断、再開が行われる。
  • Commitステージ
    • 副作用を持ち、DOMに働きかけることができる。

ライフサイクルメソッド

以下に各ライフサイクルで用意されているメソッドを紹介する。

Mounting

  • constructor
    • Mount前に一番最初に呼ばれるメソッドです。
    • ローカルステートを初期化やイベントハンドラーメソッドをインスタンスにバインドする時に使用します。
  • getDerivedFromProps
    • renderが呼ばれる前にローカルステートの更新があるかどうかを確認します。
    • もし更新があれば更新後のローカルステートを、無ければnullを返します。
    • 使用頻度は低いです。
  • render
    • JSXコードを評価して、仮想DOMを構築します。
      　　 * renderはコンポーネントに必ず定義が必要なメソッドです。
  • componetDidMount
    • 1回目のrender()が呼ばれた時に1度だけ呼ばれます。
    • 外部IFへの通信処理やタイマー処理などはこのメソッドで行います。

Updating

  • getDerivedStateFromProps
    • Update時に一番最初に呼ばれるメソッドです。
    • コンポーネントのstateを初期化します。
    • 使用頻度は低いです。
  • shouldComponentUpdate
    • コンポーネントの評価と再レンダリングを継続するかどうかを決定します。
    • falseを返したら、更新をキャンセルすることができます。
  • render
    • Mounting時のrenderと同じ内容です。
  • getSnapshotBeforeUpdate
    • レンダリングされた出力がDOMなどにコミットされる直前に呼び出されます。
    • 変更される可能性がある前に、DOMからいくつかの情報（スクロール位置など）をキャプチャできます。
    • 使用頻度は低いです。
  • componentDidUpdate
    • 更新が行われた直後に呼び出されます。
    • 最初のレンダリング時には呼び出されません。
    • 外部IFへの通信処理を行うのに適したメソッドです。

Unmounting

  • componentWillUnmount
    • コンポーネントがUnmountされて破棄される直前に呼び出されます。
    • タイマーの無効化、ネットワーク要求のキャンセル、componentDidMountで作成されたイベントリスナーのクリーンアップなどを実行します。
    • componentWillUnmountの中でsetState()を呼び出すべきではありません。
      • コンポーネントは決して再レンダリングされないからです。コンポーネント・インスタンスは、一度アンマウントされると、二度とマウントされません。

まとめ

Reactのライフサイクルとライフサイクルメソッドについてまとめました。
主要なライフサイクルについては実装でもよく使用するので、しっかり覚えておきましょう。