目次
はじめに
タイトルのとおりですが、本記事ではReactにおけるライフサイクルについて解説します。
ライフサイクルとは？
ライフサイクルとは、Reactのコンポーネントが生まれてから成長し、最終的に死ぬまでの一連の過程のことを表します。
もう少しプログラム的に説明すると以下のように言い換えられます。
- コンポーネントが生まれる。
- コンポーネントが生成されて、レンダリングされるまでの期間。(＝Mounting)
- コンポーネントが成長する。
- コンポーネントの管理するデータがユーザによって更新される期間。(＝Updating)
- コンポーネントが死ぬ。
- コンポーネントが不要となり破棄するための期間。(＝Unmounting)
各ライフサイクルでは、その期間で使用できるメソッドであるライフサイクルメソッドが用意されています。
主要なメソッドのみを記載したライフサイクルのイメージ図を以下に示します。
- Renderステージ
- 副作用を持たず、Reactによって、一時停止、中断、再開を行います。
- Commintステージ
- 副作用を持ち、DOMに働きかけることができます。
ライフサイクルメソッド
ここではライフサイクルで用意されているメソッドを紹介します。
Mounting
- constructor
- Mount前に一番最初に呼ばれるメソッドです。
- ローカルステートを初期化やイベントハンドラーメソッドをインスタンスにバインドする時に使用します。
- getDerivedFromProps
- renderが呼ばれる前にローカルステートの更新があるかどうかを確認します。
- もし更新があれば更新後のローカルステートを、無ければnullを返します。
- 使用頻度は低いです。
- render
- jsxコードを評価して、仮想DOMを構築します。
- renderはコンポーネントに必ず定義が必要なメソッドです。
- jsxコードを評価して、仮想DOMを構築します。
- componentDidMount
- 1回目のrenderが呼ばれた時に1度だけ呼ばれます。
- 外部IFへの通信処理やタイマー処理などはこのメソッドで行います。
Updating
- getDerivedStateFromProps
- Update時に一番最初に呼ばれるメソッドです。
- コンポーネントのstateを初期化します。
- 使用頻度は低いです。
- shouldComponentUpdate
- コンポーネントの評価と再レンダリングを継続するかどうかを決定します。
- falseを返したら、更新をキャンセルすることができます。
- render
- Mounting時のrenderと同じ内容です。
- getSnapshotBeforeUpdate
- レンダリングされた出力がDOMなどにコミットされる直前に呼び出されます。
- 変更される可能性がある前に、DOMからいくつかの情報(スクロール位置など)をキャプチャできます。
- 使用頻度は低いです。
- componentDidUpdate
- 更新が行われた直後に呼び出されます。
- 最初のレンダリング時には呼び出されません。
- 外部IFへの通信処理を行うのに適したメソッドです。
Unmounting
- componentWillUnmount
- コンポーネントがUnmountされて破棄される直前に呼び出されます。
- タイマーの無効化、ネットワーク要求のキャンセル、componentDidMountで作成されたイベントリスナーのクリーンアップなどを実行します。
- componentWillUnmountの中でsetState()を呼び出さないでください。
- コンポーネントは決して再レンダリングされないからです。コンポーネントは、一度Unmountされると、二度とMountされません。
まとめ
この記事ではReactにおけるライフサイクルの解説をしました。
ライフサイクルを理解して無駄のないビューの実装ができると嬉しいですね！
是非、いいねやコメントをお願いします。
コメント