目次
概要
この記事は、現在Reactを勉強中である私がReactのライフサイクルについての理解を深めるためにまとめたものです。私と同じようにReactを勉強中の人にとってこの記事が手助けとなるようであれば幸いです。
Reactの基礎の基礎については別の記事にまとめています。本記事は最低限必要な基礎を既に学習済みの方向けの内容となっています。
Reactのコンポーネントライフサイクルとは
Reactのコンポーネントにはライフサイクルというものが存在します。私が色々と調べている中でわかりやすいと感じた例が「日の出から日の入り」です。
コンポーネントのライフサイクルはMounting、Updating、Unmountingという３つの状態を遷移しています。
この３つの状態と上記の例を対応付けると、以下の表のようになります。
| 状態 | 時間帯 | 説明 |
|---|---|---|
| Mounting | 日の出前 | コンポーネントのインスタンスが作成され、DOMに挿入されるとき。レンダリングの準備期間。 |
| Updating | 日中 | propsやstateの変更によりコンポーネントが再レンダーされるとき。ユーザが操作可能な期間 |
| Unmounting | 日の入り後 | コンポーネントがDOMから削除されるとき。 |
コンポーネントのライフサイクルでは、各状態に応じて仕様できるライフサイクルメソッドというものが用意されています。
ライフサイクルメソッドの詳しい説明についてはこちらをご覧ください。
(これらはクラスコンポーネントで使用できるメソッドですが、React v16.8でHooksのuseEffect()を用いて関数コンポーネントでも一部代用できるようになりました。)
Mounting
constructor ()static getDrivedStateFromProps ()render ()componentDidMount ()
Updating
getDrivedStateFromProps ()shouldComponentUpdate ()render ()getSnapshotBeforeUpdate ()componentDidUpdate ()
Unmounting
componentWillUnmount ()
ライフサイクルメソッドの説明
ここでは、先ほど紹介したライフサイクルメソッドを使用頻度の多い順に説明をします。
よく使うライフサイクルメソッド
render()
使用できる状態： Mounting / Updating
- クラスコンポーネントで必ず定義しなければならないメソッド
- propsやstateが更新されるたびに呼ばれる
- 純粋関数である必要がある：render()内でpropsやstateなどを直接操作してはいけない
- 返す要素は単一：要素全体を一つのタグで囲む(
<div>や<React.Fragment>など)
constructor()
使用できる状態： Mounting
- Mounting時に一番最初に呼ばれるメソッド
-
React.Componentのサブクラスで実装するときにはsuper(props)を呼び出す必要がある -
this.stateを初期化するときに使用 - イベントハンドラをインスタンスにバインドするときに使用
componentDidMount()
使用できる状態： Mounting
- コンポーネントがマウントされた直後に一度だけ呼び出される（１度目の
render()後） - DOMに関する初期化処理をしたいときに使用(直接DOM操作などはしないこと)
- ネットワークへのリクエストなどを行うときに使用
-
setTimeout()などはここで行う
componentDidUpdate()
使用できる状態： Updating
- コンポーネントの更新が行われたタイミングで呼び出される
- 第一引数にprevProps(直前のprops)、第二引数にprevState(直前のstate)を受け取る
- 第三引数にsnapshotをとる場合もある（後述の
getSnapshotBeforeUpdate()の返り値)
componentWillUnmount()
使用できる状態： Unmounting
- 現在のコンポーネントが破棄(アンマウント)される直前で呼ばれるメソッド
- タイマーの無効化、ネットワークへのリクエストのキャンセルなどを行う
- 必要ない設定を破棄することでメモリを開放できる
- この後に
render()が呼ばれることはない
まれに使うライフサイクルメソッド
static getDrivedStateFromProps()
使用できる状態： Mounting / Updating
- propsの値によってstateに更新があるかチェックするメソッド
- Mounting時は
render()の直前、Updating時は一番最初に呼ばれる - 第一引数にprops、第二引数にstate
- stateがpropsに依存するというなまれな場合に使用
- 更新があれば更新後の
state、ない場合はnullを返す
shouldComponentUpdate()
使用できる状態： Updating
-
新たなstateやpropsを受け取った場合に
render()の直前で呼び出されるメソッド - 第一引数にnextProps(更新後のprops)、第二引数にnextState(更新後のstate)
-
trueまたはfalseを返す - デフォルトは
trueを返し再レンダリングをするが、falseが返った場合は更新がスキップされる
getSnapshotBeforeUpdate()
使用できる状態： Updating
-
render()後componentDidUpdate()が呼び出される直前で呼び出されるメソッド - コンポーネントが変更される可能性があるとき、スクロール位置などの情報を取得することができる
- 返り値は
componentDidUpdate()の第三引数に渡される
まとめ
今回はReactのコンポーネントライフサイクルについてまとめてみました。
Reactを扱う上でよく使うrender()メソッドもライフサイクルメソッドの一つであるということを抑えておきましょう。
それ以外にもconstructor()やcomponentDidMount()などよく登場するメソッドについては理解しておくと良いかと思います。