💭
Reactのライフサイクルについて理解する
Reactのライフサイクルとは?
React のライフサイクルは、コンポーネントが生成されてから破棄されるまでの一連のプロセスを指します。React のライフサイクルは主に以下の 3 つのフェーズに分けられます。
- マウント（Mount）
- 更新（Update）
- アンマウント（Unmount）
1. マウント（Mount）
マウントとは、コンポーネントが初めて生成され、DOM に挿入されることを指します。このフェーズでは、以下のライフサイクルメソッドが呼び出されます（クラスコンポーネントの場合）。
-
constructor: コンポーネントが生成されるときに最初に呼ばれるメソッドです。初期化や state の設定を行います。 -
static getDerivedStateFromProps: コンポーネントがマウントされる前に呼ばれる静的メソッドで、新しい props を受け取ったときに state を更新するために使われます。 -
render: コンポーネントを描画するためのメソッドです。このメソッド内で JSX を返すことで、UI の表示が行われます。 -
componentDidMount: コンポーネントがマウントされた直後に呼ばれるメソッドです。API からのデータ取得やイベントリスナーの設定など、副作用のある処理を行うのに適しています。
2. 更新（Update）
更新とは、コンポーネントの props や state が変更されたときに、再レンダリングが行われることを指します。このフェーズでは、以下のライフサイクルメソッドが呼び出されます（クラスコンポーネントの場合）。
-
static getDerivedStateFromProps: 新しい props を受け取ったときに state を更新するために使われます。 -
shouldComponentUpdate: props や state の変更が発生したときに、再レンダリングするかどうかを決定するメソッドです。パフォーマンス最適化に使われます。 -
render: コンポーネントを再描画します。 -
getSnapshotBeforeUpdate: コンポーネントの更新前の DOM から情報を取得するためのメソッドです。 -
componentDidUpdate: コンポーネントが更新された直後に呼ばれるメソッドです。ここで再び API からのデータ取得や DOM の操作など、副作用のある処理を行うことができます。
3. アンマウント（Unmount）
アンマウントとは、コンポアンマウントとは、コンポーネントが DOM から取り除かれることを指します。このフェーズでは、以下のライフサイクルメソッドが呼び出されます（クラスコンポーネントの場合）。
-
componentWillUnmount: コンポーネントがアンマウントされる直前に呼ばれるメソッドです。ここでリソースの解放やイベントリスナーの削除など、クリーンアップ処理を行います。
useEffectを使ったライフサイクルに関連する処理
ただし、最近の React（v16.8 以降）では、関数コンポーネントとフックを利用してライフサイクルに関連する処理を行うことが一般的になっています。以下は、フックを使ったライフサイクル処理の例です。
- マウント/アンマウント時の処理:
useEffectフックを使って、マウント時とアンマウント時の処理を実装します。空の依存配列[]を渡すことで、マウント時とアンマウント時に副作用関数が実行されます。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// マウント時の処理
return () => {
// アンマウント時の処理
};
}, []);
}
- 更新時の処理:
useEffectフックを使って、コンポーネントが更新されたときの処理を実装します。依存配列に監視したい変数を指定することで、その変数が変更されたときに副作用関数が実行されます。
import React, { useEffect } from 'react';
function MyComponent({ prop1, prop2 }) {
useEffect(() => {
// 更新時の処理
return () => {
// クリーンアップ処理（オプション）
};
}, [prop1, prop2]);
}
まとめ
本記事では、Reactのライフサイクルについて解説しました。Reactのライフサイクルはマウント、更新、アンマウントの3つのフェーズに分けられます。各フェーズでは、それぞれ特有のライフサイクルメソッドが呼び出されます。また、最近では関数コンポーネントとフックを使ったライフサイクル処理が一般的になっており、useEffectフックを用いることでマウント時、更新時、アンマウント時の処理を実装することができます。Reactのライフサイクルを理解することで、より効率的で堅牢なコンポーネント設計が可能になります。
Discussion