More than 1 year has passed since last update.

【一】Reactのライフサークルメソッド一覧

Posted at 2021-12-23

本記事はReactのライフサークルメソッド(lifecircle method)一覧をまとめてそれぞれの機能を説明いたします。

下記の全体像により、Reactのライフサークルメソッドは大体三種類があります。

Mountingとは、コンポーネントがユーザーにレンダリングされるまでの仕込みの期間である。
Mountingにおいて、以下のライフサークルメソッドがあります。

項番	メソッド	説明
1	constructor	Mounting時に一番最初に呼ばれるメソッドです。JSXでは使われることがほとんどないため、見かけることもまれです。super(props)を呼び、更新がする必要性があれば更新できます。
2	static getDerivedStateFromProps	このメソッドだけはstaticです。render()が呼ばれる前にstateの更新があるかどうかを確認します。もしあれば更新後のstate、無ければnullを返します。
3	componentWillMount	このメソッドはconstructorからrenderまでの間に呼ばれる。危険なメソッドので、React v17から除去される予定です。
4	render	このメソッドだけはコンポーネントで必須です。ReactがJSXコードを評価して、仮想DOMを構築します。
5	componentDidMount	このメソッドはコンポーネントがDOMに反映される後に呼ばれる。

Updatingとは、コンポーネントがユーザに表示されており、ユーザーが操作できる期間である。
Updatingにおいて、以下のライフサークルメソッドがあります。

項番	メソッド	説明
1	componentWillReceiveProps	Update時に一番最初に呼ばれるメソッドです。コンポーネントのstateを初期化します。
2	static getDerivedStateFromProps	このメソッドはReact v17から除去される予定です。
3	shouldComponentUpdate	コンポーネントの評価と再レンダリングを継続するかどうかを決定します。つまり更新をここでキャンセル出来ます。
4	componentWillUpdate	このメソッドはReact v17から除去される予定です。
5	render	上記と同様に、レンダリングするメソッドです。
6	getSnapshotBeforeUpdate	更新が発生する直前のスクロールを位置を記憶して、提供するような使い方が出来ます。
7	componentDidUpdate	更新が完了した際に呼ばれるメソッドです。

Unmountingとは、他のコンポーネントに切り替え前に現在表示されているコンポーネントを破棄するための期間である。
Mountingにおいて、以下のライフサークルメソッドがあります。

項番	メソッド	説明
1	componentWillUnmount	コンポーネントがアンロードする時に、破棄される前にトリガーされます。このライフサイクルメソッドを使用して、任意のクリーンアップタスクを実行できます。

レンダリングする時に、エラーが発生したら、このメソッドは呼ばれる。
Error Handlingにおいて、以下のライフサークルメソッドがあります。

項番	メソッド	説明
1	static getDerivedStateFromError	子供のコンポーネントはエラーが発生する時に、このメソッドは呼ばれる。
2	componentDidCatch	子供のコンポーネントはエラーが発生する時に、このメソッドは呼ばれる。

最後まで読んでいただき、ありがとうございました。
本記事は下記のサイトを参照しました。
1.React Guidebook
2.【Reactの設計を学ぶ】ライフサイクルを知ろう