UseEffectを1回だけ実行します

ReactのuseEffectフック関数は、関数コンポーネントでよく使用され、その機能はクラスコンポーネントのcomponentDidMount 、 componentDidUpdate 、およびcomponentWillUnmountメソッドに似ています。 ComponentがレンダリングされたときにuseEffectが実行されます。

簡単な例では、 useEffect 1回しか実行できません。しかし、複雑なアプリケーションでは、特に小道具の変更が関係する場合、これは保証されていません。問題は、APIのuseEffectからデータを取得するなどの操作を実行すると、データの繰り返しのフェッチングが発生する可能性があることです。これは非効率的で不必要なものです。

ソリューションは、 useEffectの2番目のパラメーターにあります。

2番目のパラメーターは、再レンダリング前に変更が発生したことを確認するためにコンポーネントが確認する必要がある変数を含む配列です。任意の小道具を置いて、ここに述べることができます。

または、空の配列を渡すことができます。

 Reactをインポート、{effect} from 'React';

function app（）{
  effect（（）=> {
    //たとえば、API}、[]）からデータを取得することなど、1回だけ実行します。

  戻る （
    <div>
      {/*取得したデータを使用*/}
    </div>
  ）;
}

これにより、 useEffect 1回しか実行されないことが保証されます。

ドキュメントの説明：

この最適化を使用する場合は、配列に時間の経過とともに変化するコンポーネントスコープ内のすべての値が含まれており、Effect（小道具や状態など）によって使用されることを確認してください。それ以外の場合、コードは以前のレンダリングから時代遅れの値を参照します。

以上がUseEffectを1回だけ実行しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。