React: useEffectのデフォルトの動作がすべてのレンダリングで実行されるのはなぜですか?

作成日 2019年11月26日  ·  3コメント  ·  ソース: facebook/react

機能をリクエストしバグを報告しますか?
useEffectに関するAPI設計の質問

現在の動作は何ですか?
現在、 useEffectはすべてのレンダリングで実行されます。 このデフォルトの動作は、2番目の引数を渡すのを忘れたときにHTTPリクエストを処理するような状況では危険な場合があります。 これは、特に私のような新参者にとってはよくある間違いのようです。 すべてのレンダリングでuseEffectを実行したい多くの(任意の)パターンを考えることはできません。 デフォルトで一度実行しない理由は何でしたか?

Question

全てのコメント3件

API設計による:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffectは、依存関係リストが変更された場合にのみ実行され、空の配列[]は、依存関係がないことを意味します(つまり、1回だけ実行されます)。 未定義の依存関係リストは、レンダリングごとにuseEffectラップされた関数を実行することを意味することは私には論理的に感じます。

すべてのレンダリングでuseEffectを実行したい多くの(任意の)パターンを考えることはできません。 デフォルトで一度実行しない理由は何でしたか?

Reactを初めて使用し、 useState変数が変更されるたびに何かを実行したいとします(たとえば、新しい値をサーバーにPOSTします)。

  • 現在の動作では、同じ値を複数回POSTしますが、変更された値の投稿を見逃すことはありません。
  • あなたが提案している振る舞いでは、初期値/最初の変更のみがPOSTされ、それ以上の変更はuseEffectコールバックをトリガーしません。

依存関係リストは、パフォーマンスの最適化/コードの簡素化を支援することを目的としていると思います。

現在のAPIでは、次の動作から決定できます。

  • 毎回エフェクトを実行します。 これは、古いクラスのcomponentDidMount + componentDidUpdate動作を模倣しています。
  • エフェクトを1回だけ実行します。 これは、古いcomponentDidMount動作を模倣しています。
  • 依存関係が変更された場合にのみエフェクトを実行します。 これは一種の新しいものですが、クラスコンポーネントAPIのコンポーネントthis.propsprevPropsで同じことを実装できます(そして多くの場合、実装しました)。

説明する「デフォルト」の動作(依存関係を明示的に指定しない場合)は、古い値がクロージャで使用されるのを防ぐため、多くの場合最も安全です。

将来的には、この多くを自動化するのに役立つ何らかの種類のコンパイラを提供することを願っています。 それまでの間、少し簡単にするために公式のESLintプラグインを提供

このページは役に立ちましたか?
0 / 5 - 0 評価