【React】ライフサイクルとは

ライフサイクルとは

Reactのライフサイクルとは、Reactコンポーネントが生成され、更新され、破棄される過程全体を表すものです。Reactコンポーネントは、これらのライフサイクルメソッドを使用して、各段階で特定の動作を実行することができます。React 16.3以降、ライフサイクルメソッドはクラスコンポーネントでのみ使用され、フックが導入されたReact 16.8以降は関数コンポーネントで代替されることが一般的です。

以下は、Reactの主要なライフサイクルメソッドの概要です。

1. マウント（Mount） :

• constructor(): コンポーネントのインスタンスが初期化されるときに呼ばれます。
• render(): コンポーネントのUIが描画されます。
• componentDidMount(): コンポーネントがDOMにマウントされた後に呼ばれます。APIのデータ取得やDOMの操作など、副作用のある処理を実行するために使用されます。

2. 更新（Update） :

• render(): コンポーネントが更新されるたびに呼ばれ、UIが再描画されます。
• componentDidUpdate(): コンポーネントの更新がDOMに反映された後に呼ばれます。前回のプロップスやステートと現在のプロップスやステートを比較して、必要に応じて追加の処理を行うことができます。

3. アンマウント（Unmount） :

• componentWillUnmount(): コンポーネントがDOMからアンマウントされる直前に呼ばれます。リソースのクリーンアップやタイマーの解除など、後始末の処理を行うために使用されます。

4. エラーハンドリング（Error Handling） :

• componentDidCatch(): コンポーネント内でエラーが発生した場合に呼ばれます。エラーをキャッチして、エラー画面やログ出力などの処理を行うために使用されます。

これらのライフサイクルメソッドを使用することで、Reactコンポーネントが異なる段階で必要な処理を実行し、UIの振る舞いや状態を適切に管理することができます。