ライフサイクル (Lifecycle)とは

Reactのライフサイクル(Lifecycle)は、Reactコンポーネントが生成され、更新され、破棄されるまでの一連のイベントの流れを指します。

Reactのコンポーネントは、特定の時点で実行されるメソッドを持ち、それによってアプリケーションの状態の変化やDOMの更新を制御します。

マウント(Mounting)

マウントフェーズは、コンポーネントがDOMに最初に追加される時のフェーズです。
以下のメソッドが順番に実行されます。

 

  • 'constructor()': コンポーネントの初期化を行います。stateの初期化やイベントハンドラのバインドなどを行う場合に使用します。
  • 'static getDerivedStateFromProps(props, state)': propsから状態を初期化または派生させる場合に使用されます(必要な場合にのみ使用)。
  • 'render()': コンポーネントのUIを描画します。
  • 'componentDidMount()': コンポーネントがDOMに追加された後に呼び出されます。ここで非同期のデータ取得やイベントの購読などの初期化を行うことができます。

更新(Updating)

更新フェーズは、コンポーネントが再レンダリングされる時のフェーズです。
以下のメソッドが順番に実行されます。

 

  • 'static getDerivedStateFromProps(props, state)': propsから状態を更新する場合に使用されます(必要な場合にのみ使用)。
  • 'shouldComponentUpdate(nextProps, nextState)': コンポーネントが再レンダリングする必要があるかどうかを判断するために使用されます。性能の最適化などに利用されます。
  • 'render()': コンポーネントのUIを再描画します。
  • 'componentDidUpdate(prevProps, prevState)': コンポーネントが更新された後に呼び出されます。DOMの更新後の処理や非同期のデータ取得などを行うことができます。

アンマウント(Unmounting)

アンマウントフェーズは、コンポーネントがDOMから削除される時のフェーズです。
以下のメソッドが実行されます。

 

  • 'componentWillUnmount()': コンポーネントがDOMから削除される前に呼び出されます。イベントの解除やクリーンアップ処理を行う場合に使用します。

Reactのライフサイクルメソッドは、コンポーネントの状態や振る舞いの制御に役立ちます。
しかし、最新のReactバージョンでは、ライフサイクルメソッドの使用が推奨されなくなっており、代わりにHooksと呼ばれる新しい機能が導入されています。
Hooksは関数コンポーネントで状態や副作用を扱うための方法を提供し、よりシンプルで柔軟なコードを書くことができます。