はじめに
Reactのライフサイクルについて、脳内整理の為ここに記録しておこうと思います。
ライフサイクルとは
Reactのコンポーネントが生成されてから消えるまでの一連の過程のことを指します。
| ①生成 | インスタンス生成される |
| ②マウント | インスタンスがDOM 要素にマウントされる |
| ③更新 | データが更新される |
| ④マウント解除 | インスタンスのマウントが解除される |
| ⑤破壊 | インスタンスが破棄される |
Reactにはライフサイクルメソッドが用意されていて、該当するライフサイクルのタイミングで、その処理が呼ばれます。
マウント時(Mounting)に呼ばれるメソッド
| メソッド名 | 説明 |
|---|---|
| constructor | Mount前に一番最初に呼ばれる |
| getDerivedFromProps | renderが呼ばれる前にローカルステートの更新があるかどうかを確認する |
| render | 仮想DOMを構築する |
| componetDidMount | 1回目のrender()が呼ばれた時に1度だけ呼ばれる。外部への通信処理はここで行う |
更新時(Updating)に呼ばれるメソッド
| メソッド名 | 説明 |
|---|---|
| getDerivedStateFromProps | Update時に一番最初に呼ばれる |
| shouldComponentUpdate | コンポーネントの評価と再レンダリングを継続するかどうかを決定 |
| render | 仮想DOMを構築する |
| getSnapshotBeforeUpdate | レンダリングされた出力がDOMなどにコミットされる直前に呼び出される |
| componentDidUpdate | 更新が行われた直後に呼び出される。外部への通信処理はここで行う |
マウント解除時(Unmounting)に呼ばれるメソッド
| メソッド名 | 説明 |
|---|---|
| componentWillUnmount | 破棄される直前に呼び出される |