React Lifecycle Methods

In React, lifecycle methods are special methods that get called at different stages of a component's existence. They allow you to control what happens to a component at various stages like mounting, updating, or unmounting. With the introduction of React Hooks in React 16.8, functional components can also manage their own side effects, but lifecycle methods are still important in class components. Here’s a detailed look at the most commonly used lifecycle methods:

Mounting

The mounting phase in React refers to the process where a component is created and inserted into the DOM. This phase involves a series of lifecycle methods called in a specific order, allowing developers to initialize and configure the component before it is rendered. Here’s a detailed breakdown of each method in the mounting phase in order of their execution:

1. constructor(props)

Purpose:

• The constructor is the first method called when a component instance is created. It is used to initialize the component’s state and bind event handlers.

• In the constructor, you can set the initial state by directly assigning an object to this.state. You also typically pass props to the base Component class using super(props) to ensure the component is properly initialized.

Example:

Notes:

• The constructor is only called once during the component's lifecycle.

• You should avoid side effects in the constructor (e.g., network requests or subscriptions) and reserve those tasks for componentDidMount.

2. static getDerivedStateFromProps(props, state)

Purpose:

• This is a static method that is called right before rendering, both during the initial mount and during updates. It allows the component to update its state based on changes in props.

• It returns an object to update the state or null if no state updates are needed.

Example:

Notes:

• This method is rarely needed, as React's data flow is usually handled by passing props directly.

• It's used in special cases where state needs to be derived from props.

3. render()

Purpose:

• The render method is the only required lifecycle method in a class component. It determines what the UI of the component should look like by returning React elements.

• This method is pure, meaning it should not modify the component state or interact with the DOM.

Example:

Notes:

• The render method can return a variety of values, including JSX elements, arrays, fragments, portals, strings, numbers, or null.

• Since render is pure, avoid side effects or state mutations within this method.

4. componentDidMount()

Purpose:

• This method is invoked immediately after a component is mounted (i.e., inserted into the DOM). It’s the perfect place to run side effects, such as fetching data from an API, setting up subscriptions, or initializing third-party libraries.

• componentDidMount is the last method called in the mounting phase, making it ideal for any DOM manipulations.

Example:

Notes:

• Since componentDidMount is called after the initial render, updating the state within it will trigger a re-render. This is common when fetching data or interacting with the DOM.

• If you set up subscriptions or event listeners here, remember to clean them up in componentWillUnmount to avoid memory leaks.

Updating

The updating phase in React refers to the process when a component is re-rendered due to changes in its state or props. During this phase, several lifecycle methods are invoked in a specific order, allowing you to control how your component reacts to these changes. Here's a detailed look at each method involved in the updating phase in order of their execution:

1. static getDerivedStateFromProps(props, state)

Purpose:

• この静的メソッドは、新しい props または state を受信したときにコンポーネントをレンダリングする直前に呼び出されます。これにより、コンポーネントは props の変更に基づいて内部状態を更新できます。

• 状態を更新するオブジェクトを返します。更新が必要ない場合は null を返します。

例:

メモ:

• このメソッドは、状態を props と同期する必要があるシナリオで役立ちます。

• 更新のたびに呼び出されるため、ここでの大量の計算は避けてください。

2. shouldComponentUpdate(nextProps, nextState)

目的:

• このメソッドは、新しい props または state を受信したときにレンダリング前に呼び出されます。これにより、コンポーネントを更新するかどうかを制御できます。 true (デフォルト) を返すと、コンポーネントが更新されることを意味します。 false を返すと、そうでないことを意味します。

• これは主に、不必要な再レンダリングを防止してパフォーマンスを最適化するために使用されます。

例:

メモ:

• このメソッドは、最初のレンダリング中またはforceUpdate() の使用時には呼び出されません。

• 複雑なロジックは慎重に扱わないとパフォーマンスの問題やバグにつながる可能性があるため、ここでは避けてください。

3.render()

目的:

• コンポーネントの現在の状態と props に基づいて仮想 DOM の次のバージョンを生成するために、render メソッドが呼び出されます。

• これは純粋です。つまり、コンポーネントの状態を変更したり、DOM とやり取りしたりすべきではありません。

例:

メモ:

• レンダリングは純粋であるため、状態やプロパティの変更は返された JSX に反映される必要があります。

• レンダリング内での副作用 (DOM の直接変更やネットワーク リクエストの作成など) を回避します。

4. getSnapshotBeforeUpdate(prevProps, prevState)

目的:

• このメソッドは、仮想 DOM からの変更が実際に実際の DOM に反映される直前に呼び出されます。これにより、一部の情報 (現在のスクロール位置など) が変更される前に取得できます。

• このメソッドから返された値は、componentDidUpdate の 3 番目の引数として渡されます。

例:

メモ:

• このメソッドは、更新中にスクロール位置を維持するなど、DOM が変更される前に DOM に関する情報を取得する場合に特に便利です。

• componentDidUpdate と一緒によく使用されます。

5.componentDidUpdate(prevProps、prevState、スナップショット)

目的:

• このメソッドは、更新が行われた直後に呼び出されます。ここは、更新に基づいて DOM 操作、ネットワーク リクエスト、その他の副作用を実行するのに適した場所です。

• 以前のプロパティと状態、および getSnapshotBeforeUpdate によって返された値 (存在する場合) を受け取ります。

例:

メモ:

• このメソッドは、DOM が更新された後に必要な操作を実行する場合に便利です。

• 更新の無限ループを防ぐ条件でラップされている場合を除き、componentDidUpdate 内で状態を設定することは避けてください。

アンマウント中

React のアンマウント フェーズは、コンポーネントが DOM から削除されるときに発生します。このフェーズには、コンポーネントが破棄される前に必要なクリーンアップ タスクを実行できる単一のライフサイクル メソッドがあります。このフェーズを適切に処理することは、メモリ リーク、未解決のイベント リスナー、またはコンポーネントの削除後に残る可能性のあるその他の副作用を防ぐために非常に重要です。

1.componentWillUnmount()

目的:
ComponentWillUnmount は、コンポーネントがアンマウントされて破棄される直前に呼び出されます。このメソッドは、次のようなクリーンアップ アクティビティに使用されます。

• ネットワークリクエストをキャンセルしています。

• タイマーまたは間隔をクリアします。

• イベント リスナーを削除しています。

• サブスクリプションをクリーンアップしています (Redux、WebSocket などから)。

• componentDidMount または他のライフサイクル メソッドで作成された副作用を無効化またはクリーンアップします。

例:

この例では:

• コンポーネントがマウントされるとタイマーが開始されます (componentDidMount)。

• コンポーネントが DOM から削除された後もタイマーが実行されないよう、componentWillUnmount でタイマーがクリアされます。これは、潜在的なメモリ リークや予期しない動作を防ぐために非常に重要です。

重要な考慮事項:

• メモリ リークの防止:ComponentDidMount でイベント リスナーまたは間隔を設定した場合、メモリ リークを防ぐために、componentWillUnmount でそれらを削除する必要があります。そうしないと、アプリケーションが時間の経過とともにより多くのメモリを消費したり、予期せぬ動作をしたりする可能性があります。

• サブスクリプションのクリーンアップ: コンポーネントが外部データ ソース (Redux ストア、Firebase、WebSocket 接続など) をサブスクライブしている場合は、componentWillUnmount でサブスクライブを解除する必要があります。これにより、コンポーネントが削除された後は、それらのソースからの更新に反応しなくなります。

• No setState: コンポーネントが破棄されようとしているため、componentWillUnmount 内で setState を呼び出さないでください。コンポーネントは再レンダリングされないため、これを実行しても効果はありません。

• 非同期クリーンアップ: クリーンアップに非同期操作 (ネットワーク リクエストのキャンセルなど) が含まれる場合は、競合状態や、機能しなくなったコンポーネントとの対話を避けるために、それらの操作が適切に処理されていることを確認してください。存在します。

一般的な使用例:

• タイマーと間隔: コンポーネントがアンマウントされた後に setTimeout または setInterval インスタンスが実行されないようにクリアします。

• イベント リスナー: コンポーネントのアンマウント後にイベント リスナーが起動されないように、ウィンドウ、ドキュメント、または任意の DOM 要素にアタッチされているイベント リスナーを削除します。

• サブスクリプション: データ ストリームまたは外部サービス (WebSocket、Firebase、Redux ストアなど) からのサブスクライブを解除します。

• ネットワーク リクエスト: リクエストが完了する前にコンポーネントがアンマウントされた場合、進行中のネットワーク リクエストをキャンセルします。これは、キャンセル トークンを提供する Axios などのライブラリを使用して実行できます。

ベストプラクティス:

• componentDidMount またはその他のライフサイクル メソッドで副作用が設定されている場合は、常にコンポーネントWillUnmount で副作用をクリーンアップします。

• 非同期操作では、アンマウントされたコンポーネントと誤って対話しないように注意してください。

• componentWillUnmount が呼び出された後もコンポーネントが存在し続けると想定するロジックは避けてください。

エラー処理

React のエラー処理フェーズは、レンダリング中、ライフサイクル メソッド、およびコンポーネントの下のツリー全体のコンストラクターで発生するエラーをキャッチして処理するように設計されています。これは、エラー境界と呼ばれるクラス コンポーネントの特別なライフサイクル メソッドを使用して実現されます。

エラー境界の概要

• エラー境界は、子コンポーネント ツリー内の任意の場所で JavaScript エラーをキャッチし、それらのエラーをログに記録し、アプリケーション全体をクラッシュさせる代わりにフォールバック UI を表示する React コンポーネントです。これにより、エラーがアプリケーションのルートに伝播するのを防ぎ、アプリケーションの回復力が高まります。

1.静的getDerivedStateFromError(エラー)

目的:

• この静的メソッドは、レンダリング段階、ライフサイクル メソッド、または子コンポーネントのコンストラクターでエラーがスローされたときに呼び出されます。

• 次のレンダリングでフォールバック UI が表示されるように状態を更新できます。

使用法:

• メソッドは、スローされたエラーをパラメーターとして受け取り、コンポーネントの状態を更新するオブジェクトを返します。

• このメソッドで状態を設定すると、何か問題が発生したことをユーザーに通知するフォールバック UI をレンダリングできます。

例:

メモ:

• このメソッドを使用すると、エラーが発生したときに表示される内容を制御できます。たとえば、一般的なエラー メッセージまたはカスタム エラー コンポーネントを表示することを選択できます。

• 通常、フォールバック UI のレンダリングをトリガーできるエラー状態を設定するために使用されます。

2.componentDidCatch(エラー、情報)

目的:

• このメソッドは、子孫コンポーネントによってエラーがスローされた後に呼び出されます。これは、エラー情報をログに記録したり、エラー追跡サービスにエラーを報告するなどの副作用を実行したりするために使用されます。

• getDerivedStateFromError とは異なり、このメソッドを使用すると、エラーに関する追加の詳細と、エラーが発生したコンポーネント スタック トレースを取得できます。

使用法:
このメソッドは 2 つの引数を受け取ります:

• error: スローされたエラー。

• info: どのコンポーネントがエラーをスローしたかに関する情報を含む文字列を含む、componentStack プロパティを持つオブジェクト。

例:

メモ:

• componentDidCatch は、エラーをログに記録したり、エラーを監視サービス (Sentry、LogRocket など) に送信したりする場合に特に役立ちます。

• getDerivedStateFromError はフォールバック UI のレンダリングに役立ちますが、componentDidCatch はエラーの詳細をキャプチャしてログに記録することに重点を置いています。

エラー境界の使用方法

• コンポーネントのラッピング: エラー境界を使用して、任意のコンポーネントまたはコンポーネントのセットをラップできます。これは、グローバルに (例: アプリケーション全体で)、またはより選択的に (例: エラーが発生しやすいコンポーネントの周囲で) 実行できます。

例:

この例では、ErrorBoundary が MyComponent をラップしています。 MyComponent またはその子のいずれかがエラーをスローした場合、ErrorBoundary がそれをキャッチし、フォールバック UI を表示します。

主な考慮事項:

エラー境界は、次のシナリオでエラーをキャッチします:

• レンダリング中。

• ライフサイクル メソッド内 (クラス コンポーネント内のメソッドを含む)。

• 子コンポーネントのコンストラクター内。

エラー境界は、次のシナリオではエラーをキャッチしません:

• イベント ハンドラー (イベント ハンドラー自体内の try/catch ブロックを使用してエラーを捕捉できます)。

• 非同期コード (setTimeout、requestAnimationFrame など)。

• サーバー側レンダリング。

• エラー境界自体でスローされたエラー (ただし、そのようなエラーをキャッチするためにエラー境界をネストすることもできます)。

ベストプラクティス:

• エラー境界を使用して、小さな個別のエラーが原因でアプリ全体がクラッシュするのを防ぎます。

• サードパーティのコンポーネントや複雑なロジックを処理するコンポーネントなど、アプリの潜在的にエラーが発生しやすい部分の周囲にエラー境界を配置します。

• エラー境界がユーザーフレンドリーなフォールバック UI を提供し、問題が発生したことをユーザーに通知するようにします。

これらのライフサイクル メソッドを理解すると、React コンポーネントの状態、プロパティ、副作用をより適切に管理できるようになります。

Functional Component のライフサイクル メソッド

機能コンポーネントでは、React の useEffect フックが副作用とライフサイクル メソッドを処理する主な方法です。 useEffect フックは、componentDidMount、componentDidUpdate、componentWillUnmount などのクラス コンポーネントのライフサイクル メソッドと同様の動作を複製できます。 useEffect の仕組みと、これらのライフサイクル メソッドとの関連性を詳しく説明します。

基本構文

• 最初の引数 (効果): 副作用ロジックを配置する関数。この関数は、コンポーネントがアンマウントされるとき、またはエフェクトが再実行される前に、リソースをクリーンアップするクリーンアップ関数を返すことができます。

• 2 番目の引数 (依存関係): エフェクトをいつ再実行するかを決定する依存関係の配列。この配列内の値のいずれかが変更されると、エフェクトが再度トリガーされます。

useEffect をコンポーネントDidMount として使用

componentDidMount (コンポーネントがマウントされた後に一度実行される) の動作を複製するには、空の依存関係配列 [] を指定して useEffect を使用できます。

例:

• 動作: エフェクトは、クラス コンポーネントのcomponentDidMount と同様に、最初のレンダリング後に 1 回だけ実行されます。

useEffect をコンポーネントDidUpdate として使用

componentDidUpdate を模倣するには、依存関係を持つ useEffect を使用します。依存関係が変更されるたびにエフェクトが実行されます。

例:

• 動作: このエフェクトは、componentDidUpdate.
と同様に、依存関係 (count または someProp) が変更される各レンダリング後に実行されます。

useEffect をコンポーネントとして使用しますWillUnmount

componentWillUnmount を複製するには、useEffect からクリーンアップ関数を返します。このクリーンアップ関数は、コンポーネントがアンマウントされるとき、またはエフェクトが再実行される前に実行されます。

例:

• 動作: クリーンアップ関数は、componentWillUnmount と同様に、コンポーネントがアンマウントされるときに実行されます。

3 つのライフサイクル メソッドすべてを 1 つの useEffect で処理する

多くの場合、単一の useEffect でコンポーネントのマウント、更新、アンマウントのフェーズを処理できます。これを示す例を次に示します。

例:

• マウント: エフェクトは最初のレンダリングで 1 回実行されます。

• 更新中: someProp が変更されるたびにエフェクトが実行されます。

• アンマウント: クリーンアップ関数は、コンポーネントがアンマウントされるとき、または依存関係の変更によりエフェクトが再実行される前に実行されます。

useEffectの実行頻度の制御

useEffect の動作は依存関係配列によって制御されます:

• 依存関係なしの配列: エフェクトはレンダリングのたびに実行されます。

• 空の依存関係配列 []: エフェクトは、最初のレンダリング (componentDidMount を模倣) 後に 1 回だけ実行されます。

• 特定の依存関係: 指定された依存関係のいずれかが変更されるたびに、エフェクトが実行されます。

• 例: 依存関係配列なし

• 動作: エフェクトは各レンダリング (初期および更新) 後に実行されます。

よくある落とし穴とベストプラクティス

• 依存関係の欠落を避ける: 古くなったクロージャやバグを避けるために、useEffect 内で使用されるすべての状態とプロパティを依存関係配列に常に含めます。

• 複数の useEffect 呼び出し: 単一コンポーネント内で複数の useEffect フックを使用するのが一般的であり、それぞれが特定の副作用を担当することが推奨されます。これにより、コードがよりモジュール化され、管理が容易になります。

• クリーンアップ: サブスクリプション、タイマー、またはコンポーネントがアンマウントされるとき、またはエフェクトが再トリガーされるときに解放される必要があるその他のリソースが関係するエフェクトについては、常にクリーンアップを考慮してください。

useEffect を理解して効果的に使用すると、関数コンポーネント内でクリーンで予測可能な方法で副作用を管理できるようになり、クラス コンポーネントがライフサイクル メソッドで持つのと同じ機能が提供されます。

The above is the detailed content of React Lifecycle Methods. For more information, please follow other related articles on the PHP Chinese website!