一、何であるか#
ライフサイクル（Life Cycle）の概念は非常に広範に使用されており、経済、環境、技術、社会などの多くの領域で頻繁に使用されます。基本的な意味は、「生まれてから死ぬまで」（Cradle-to-Grave）のプロセス全体を指します。
Vue と同様に、React のコンポーネントのライフサイクルは、作成、データの初期化、テンプレートのコンパイル、DOM のマウント→レンダリング、更新→レンダリング、アンマウントなどの一連のプロセスで構成されています。
二、プロセス#
ここでは、React 16.4 以降のライフサイクルについて説明します。以下の 3 つの段階に分けることができます。
- 作成段階
- 更新段階
- アンマウント段階
作成段階#
作成段階は、次のライフサイクルメソッドに分かれています。
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
constructor#
インスタンス化のプロセスで自動的に呼び出されるメソッドで、このメソッド内でsuperキーワードを使用して親コンポーネントからpropsを取得します。
このメソッドでは、通常、stateの初期化やメソッドのマウントなどの操作が行われます。
getDerivedStateFromProps#
これは新しいライフサイクルメソッドであり、静的なメソッドですので、コンポーネントのインスタンスにアクセスすることはできません。
実行タイミング：コンポーネントの作成および更新の段階で、propsの変更やstateの変更に関係なく呼び出されます。
renderメソッドの前に呼び出され、第 1 引数には更新されるprops、第 2 引数には前の状態のstateが渡されます。propsとstateを比較して制限条件を追加し、不要な状態の更新を防止することができます。
このメソッドは、新しいオブジェクトを返して新しいstateとして使用するか、nullを返してstateを更新しないことを示す必要があります。
render#
クラスコンポーネントで必ず実装する必要があるメソッドで、DOM 構造をレンダリングするために使用されます。コンポーネントのstateとpropプロパティにアクセスすることができます。
注意：render内でsetStateを使用しないでください。これにより、無限ループが発生し、メモリのクラッシュが発生する可能性があります。
componentDidMount#
コンポーネントが実際の DOM ノードにマウントされた後に実行されます。これはrenderメソッドの後に実行されます。
このメソッドは、データの取得やイベントリスナーの設定など、さまざまな操作に使用されます。
更新段階#
この段階の関数は主に次のメソッドから構成されています。
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
getDerivedStateFromProps#
これは前述と同じメソッドです。
shouldComponentUpdate#
このメソッドは、現在のpropsとstateに基づいてコンポーネント自体を再レンダリングする必要があるかどうかを通知します。デフォルトでは、常にtrueを返します。
実行タイミング：新しいpropsまたはstateがある場合に呼び出され、trueまたはfalseを返してコンポーネントの更新を通知します。
通常、このライフサイクルメソッドで深い比較を行うことはお勧めしません。効率に影響を与える可能性があります。
また、setStateを呼び出すこともできません。これにより、無限ループが発生する可能性があります。
render#
前述と同じです。
getSnapshotBeforeUpdate#
このライフサイクル関数は、renderの後に実行されますが、DOM 要素はまだ更新されていません。
このメソッドは、componentDidUpdateに渡すためのSnapshot値を返します。
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}
このメソッドの目的は、コンポーネントの更新前にいくつかの情報（スクロール位置など）を取得することです。コンポーネントが更新された後、これらの情報に基づいて UI の視覚的な状態を復元することができます。
componentDidUpdate#
実行タイミング：コンポーネントの更新が完了した後にトリガーされます。
このメソッドでは、前後のpropsとstateの変化に基づいて適切な操作（データの取得、DOM スタイルの変更など）を行うことができます。
アンマウント段階#
componentWillUnmount#
このメソッドは、コンポーネントがアンマウントされる前に、イベントリスナーの解除やネットワークリクエストのキャンセルなど、いくつかのクリーンアップ操作を行うために使用されます。
コンポーネントインスタンスがアンマウントされると、再度マウントされることはありませんが、再作成される可能性があります。
三、まとめ#
新しいバージョンのライフサイクルの全体的なフローは次の図のようになります：
古いライフサイクルのフローチャートは次のようになります：
これらの 2 つの図を比較すると、新しいバージョンのライフサイクルには次の 3 つのメソッドが削除されていることがわかります：
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
実際には、これらの 3 つのメソッドはまだ存在しており、前者にはUNSAFE_の接頭辞が付いているだけです（例：UNSAFE_componentWillMount）。これは、これらのライフサイクルメソッドのコードが将来の React バージョンで廃止される可能性があることを意味しています。
また、次の 2 つのライフサイクル関数が追加されました：
- getDerivedStateFromProps
- getSnapshotBeforeUpdate