Reactライフサイクルイベント

Reactライフサイクルイベントとその使用方法をご覧ください

Reactクラスのコンポーネントは、いくつかのライフサイクルイベントのフックを持つことができます。

フックを使用すると、関数コンポーネントも別の方法でフックにアクセスできます。

コンポーネントの存続期間中、呼び出される一連のイベントがあり、各イベントにフックしてカスタム機能を提供できます。

ここで説明するのは、どの機能にどのフックが最適かということです。

まず、Reactコンポーネントのライフサイクルには3つのフェーズがあります。

  • 実装
  • 更新
  • アンマウント

これらの3つのフェーズと、それぞれに対して呼び出されるメソッドについて詳しく見ていきましょう。

実装

マウントする場合、コンポーネントがDOMにマウントされる前に、4つのライフサイクルメソッドがあります。constructorgetDerivedStateFromPropsrenderそしてcomponentDidMount

コンストラクタ

コンストラクターは、コンポーネントをマウントするときに呼び出される最初のメソッドです。

通常、コンストラクターを使用して、を使用して初期状態を設定します。this.state = ...

getDerivedStateFromProps()

状態が小道具に依存している場合、getDerivedStateFromProps小道具の値に基づいて状態を更新するために使用できます。

React 16.3で追加され、componentWillReceiveProps非推奨のメソッド。

この方法では、にアクセスできませんthis静的メソッドなので。

これは純粋なメソッドであるため、副作用を引き起こさず、同じ入力で複数回呼び出されたときに同じ出力を返す必要があります。

状態の更新された要素を持つオブジェクトを返します(または状態が変更されない場合はnull)

render()

render()メソッドから、コンポーネントインターフェイスを構築するJSXを返します。

これは純粋なメソッドであるため、副作用を引き起こさず、同じ入力で複数回呼び出されたときに同じ出力を返す必要があります。

componentDidMount()

このメソッドは、API呼び出しを実行したり、DOMで操作を処理したりするために使用するメソッドです。

更新

更新する場合、コンポーネントがDOMにマウントされる前に5つのライフサイクルメソッドがあります。getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdateそしてcomponentDidUpdate

getDerivedStateFromProps()

この方法については、上記の説明を参照してください。

shouldComponentUpdate()

このメソッドはブール値を返します。trueまたはfalse。このメソッドを使用して、Reactに再レンダリングを続行するかどうかを指示し、デフォルトでtrue。あなたは戻りますfalse再レンダリングに費用がかかり、これがいつ発生するかをより細かく制御したい場合。

render()

この方法については、上記の説明を参照してください。

getSnapshotBeforeUpdate()

このメソッドでは、前のレンダリングと現在のレンダリングの小道具と状態にアクセスできます。

そのユースケースは非常にニッチであり、おそらく使用量が少なくなるでしょう。

componentDidUpdate()

このメソッドは、コンポーネントがDOMで更新されたときに呼び出されます。これを使用して、サードパーティのDOM APIを実行するか、DOMが変更されたときに更新する必要があるAPIを呼び出します。

に対応しますcomponentDidMount()取り付け段階からの方法。

アンマウント

このフェーズでは、1つの方法しかありません。componentWillUnmount

componentWillUnmount()

このメソッドは、コンポーネントがDOMから削除されたときに呼び出されます。これを使用して、実行する必要のあるあらゆる種類のクリーンアップを実行します。

レガシー

を使用するアプリで作業している場合componentWillMountcomponentWillReceivePropsまたはcomponentWillUpdate、これらはReact 16.3で非推奨になり、他のライフサイクルメソッドに移行する必要があります。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: