React useEffect() フック: 使用法、使用方法、いつ使用するか

useEffect() フックの概要

useeffectキーコンポーネントをフックします。 データのフェッチ、イベント リスナーのセットアップ、DOM の変更などのタスクを処理し、ユーザーが機能コンポーネントを使用して副作用を実行できるようにします。 また、コンポーネントのライフサイクルも制御します。

useeffectフックは、関数とオプションの依存関係配列という 2 つの引数を利用します。 最初の引数として渡された関数は、コンポーネントの最初のレンダリング後に実行され、更新のたびに再度実行されます。依存関係配列を使用して、効果が依存する変数を指定できます。 依存配列の変数のいずれかが変更されると、エフェクトの新しい実行が実行されます。

本来、useeffect フックは、 ES6 クラス コンポーネントのライフサイクルの下で直面する課題に取り組むために作成されました。しかし、今ではそれが React の中心的なコンセプトの 1 つになりました。

React の useeffect とは何かについて簡単に説明したので、今度はその構文を見てみましょう。

useEffect() フックの基本構文

useEffect は2 つの引数をサポートします。 2 番目の引数はオプションです。 構文は次のとおりです。

useEffect(<関数>, <依存関係>)

この関数には副作用ロジックが含まれています。 これにより、DOM 更新の直後にコールバックの実行が引き起こされます。

依存関係には、副作用の依存関係のオプションの配列 (state 値と props 値) が含まれます。エフェクト使用フックは、レンダリング中に依存関係が変更された場合にのみコールバックを実行することに注意してください。

この構文は、useEffect() の単独の目的を果たします。 これにより、コールバック関数内に副作用ロジックを配置し、依存関係引数を使用して副作用をいつ実行する必要があるかを制御できます。

useEffect() フックを実装するときは、次の構文を考慮できます。

// useEffectをインポート

import { useEffect } から 'react';

関数 MyComponent() {

// 返された JSX の上で呼び出します

// 2 つの引数、つまり配列と関数を渡します

useEffect(() => {

// エフェクト関数

return () => {

// クリーンアップ関数

};

}, [/* 依存関係配列 */]);

// コンポーネントのレンダリング ロジック

}

}

無料のテクノロジー コースをチェックして、競合他社に差をつけてください。

useEffect() フックを使用したコンポーネントのマウントとアンマウント

取り付け

React コンポーネントのライフサイクルの初期段階では、コンポーネントを作成して DOM に挿入します。 React useeffectのこのライフサイクル ステージには、コンポーネントのマウント時に実行される、componentDidMount ライフサイクル メソッドが含まれています。

useEffect() フックを使用してコンポーネントをマウントする例を次に示します。

コンポーネントDidMount() {

console.log(“コンポーネントは正常にマウントされました”);

this.setState({

ロード済み: true

})

}

上の例では、componentDidMount を使用して setState を使用できます。 したがって、ライフサイクル メソッドで状態を簡単に設定および変更できます。 対応するメソッドは API 呼び出しを使用し、リモート エンドポイントを呼び出し、データをフェッチします。

アンマウント中

このReact useeffectライフサイクル メソッドは、DOM 内のクリーンアップを処理します。これは、 DOM からコンポーネントを削除するuseeffect クリーンアップ関数に似ています。 Reactではアンマウントと呼ばれます。 アンマウントには、componentWillUnmount という 1 つのライフサイクル メソッドのみが使用されます。 DOM からコンポーネントを削除する場合に呼び出されます。

コンポーネントウィルアンマウント() {

console.log(“コンポーネントは正常にアンマウントされました”);

}

状態変更を処理するための use effect() フックの使用

useeffectはレンダリングのたびに実行されます。また、状態変化を認識して特定のコードを実行するためにも使用されます。 useEffect() フックの 2 番目の引数を渡すことで、エフェクトの実行時間を制御できます。 2 番目の引数は依存関係の配列として機能します。つまり、対応する変数が変更された場合、エフェクトを再実行する必要があります。 状態は変数タイプの 1 つであることに注意してください。

次のセクションでは、use Effect フックが状態の変更をどのように処理するかを説明する例を示します。

たとえば、「日」の値に基づいて副作用を実行したい場合があります。 その日の値に応じて挨拶メッセージを表示する副作用があるとします。 その日の値は状態変数に保存されます。

日を選択するたびに、状態が更新されます。 状態値を変更すると、グリーティング メッセージを更新できます。 状態変数を依存関係配列のサブセットとして useEffect フックに渡す必要があります。

useEffect(() =>

{

// 副作用

}、 [州]）;

上記のuseeffect 反応ネイティブの例では、状態変数の値が更新された場合に副作用が実行されます。

人気のソフトウェア エンジニアリング コースを探索する

API およびネットワーク リクエストでの useEffect() フックの使用

API およびネットワーク リクエストで「useEffect()」フックを使用して、サーバーからデータをフェッチし、エラーを処理できます。 API で「useEffect()」を使用し、ネットワーク エラーを処理する方法の例を次に示します。

import React, { useState, useEffect } from 'react';

関数 MyComponent() {

const [データ、setData] = useState(null);

const [エラー、setError] = useState(null);

useEffect(() => {

非同期関数 fetchData() {

試す {

const 応答 = await fetch('https://api.example.com/data');

if (!response.ok) {

throw new Error('ネットワーク応答が正常ではありませんでした');

}

const json = 応答を待ちます.json();

setData(json);

} キャッチ (エラー) {

setError(エラー);

}

}

fetchData();

}、[]);

if (エラー) {

<div>エラーを返します: {error.message}</div>;

}

if (!data) {

return <div>読み込み中…</div>;

}

戻る （

<div>

<p>{data.message}</p>

</div>

);

}

この例を変更して、ネットワーク要求と API 応答を処理するために必要な追加機能を含めることができます。

高度な useEffect() フック テクニック

高度なuseeffect 反応ネイティブ技術の 1 つは記憶です。これは、関数呼び出しの出力をキャッシュする最適化手法です。 その後、再度同じ入力が入力されたときにuseeffect return 関数がそれを返します。

もう 1 つのよく知られた useEffect() フック手法は useMemo フックです。 値を計算して記憶できます。 その構文は次のとおりです。

「react」からインポート { useMemo }

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() フックの依存関係

useEffect() フックの依存関係には、副作用の依存関係のリストが含まれ、状態またはプロパティの値も含まれます。 dependency 引数を使用すると、コンポーネントのマウントや特定の状態/プロパティ値の更新など、いくつかのコンポーネントのライフサイクル イベントをキャッチできます。

dependency 引数を使用すると、コンポーネントのレンダリング サイクルに関係なく、副作用が呼び出される時間を制御できます。

useEffect() フックを使用した条件付きレンダリング

useEffect フックを使用すると、フック内に条件を入れることができます。 ここに例を示します。

useEffect(() => {

if (実行すべき) {

// (条件のリスト)

}

}, [実行すべき])

shouldExecute 関数で実行する必須条件を指定する必要があります。

effect() フックと ComponentDidMount() および ComponentDidUpdate() を使用する

useEffect()フックとcomponentDidUpdate():

useEffect()フックとcomponentDidMount():

useEffect() フックのよくある間違いとベスト プラクティス。

よくある間違い

1. 依存関係を定義しない

useEffect はコンポーネントがレンダリングされるたびに実行されます。 したがって、再レンダリングをトリガーする必要がある値を定義する必要があります。 そうしないと、useEffect 関数によってパフォーマンスの問題が発生する可能性があります。

2. useEffectフックの実行後にクリーンアップされない

useEffect は、コンポーネントがアンマウントされたときに実行されるクリーンアップ関数を返す場合があります。 useEffect の後にクリーンアップしないと、メモリ リークやその他の問題が発生する可能性があります。 したがって、 useeffect クリーンアップ関数を使用することが重要です。

3. useEffect 関数で依存関係なしで setState を使用する

useEffect の状態を更新すると、別のレンダリングがトリガーされます。 これにより、無限ループが発生する可能性があります。 これを防ぐには、更新する状態変数を useEffect フックの依存関係として常に定義する必要があります。

ソフトウェア開発の無料コースを探索する

ベストプラクティス：

• useEffect フックを使用する場合は、コンポーネントごとに 1 つだけを使用するようにしてください。 useEffect フックが複数ある場合、コンポーネントがレンダリングされるたびにすべてのフックが実行されます。 そのため、パフォーマンスの問題や予期しない動作が発生する可能性があります。
• 条件、ループ、またはネストされた関数内で useEffect フックを使用しないようにしてください。 for ループ内で State を使用すると、React はループが実行されるたびに新しい状態変数を作成します。 したがって、予期しない動作につながります。
• useEffect フックを過度に使用しないように注意してください。 これらはコードを読みにくくする可能性があり、過度に使用するとパフォーマンスに影響を与える可能性があります。
• useEffect フックは React 関数からのみ呼び出す必要があります。 クラスコンポーネントから呼び出すと、エラーが表示されます。

結論

追加のコードを書かずにコンポーネントのプロパティと状態に簡単にアクセスしたい場合は、 react で useeffect を使用するのが最適です。状態またはプロパティが変更されたときに副作用を実行することが容易になるため、コンポーネント内の副作用が大幅に簡素化されます。 React コンポーネントが確実に最適に動作するように、上で説明した側面とベスト プラクティスを考慮することができます。

要求の厳しいソフトウェア開発スキルを学ぶことは、現代では非常に重要です。 LJMU で upGrad のコンピュータ サイエンスの理学修士号を取得することで、これらの最先端のスキルを身に付けることができます。 このコースでは、Java、Python、関連分野の専門知識などのスキルを身につけることで、専門のソフトウェア開発者になれます。 このコースでカバーされる側面を徹底的に学ぶことは、JavaScript 開発者、ソフトウェア エンジニア、バックエンド エンジニアなどの仕事の機会を探すのに役立ちます。

ソフトウェア開発スキルを習得するだけでなく、upGrad は、 IIITB のフル スタック開発におけるエグゼクティブ PG プログラムやフルスタック ソフトウェア開発ブートキャンプなどのコースを通じて、フルスタック開発者としてのキャリアを向上させるのにも役立ちます。 これらのプログラムは、受験者が要求の厳しいフルスタックの開発スキルを習得し、成功するキャリアへの道を効果的に切り開くことができる没入型学習プラットフォームを提供します。