React の初期レンダリングで「useEffect」が実行されないようにする方法は?

初期レンダリングでの useEffect の実行の防止

React の useEffect() フックは、各レンダリング後の呼び出しを含め、componentDidUpdate() の動作を模倣します。 。ただし、componentDidUpdate() とは異なり、useEffect() は最初のレンダリングでも実行されます。この記事では、この問題を修正し、最初のレンダリング段階で useEffect() が実行されないようにする方法について説明します。

useRef フックの使用

useEffect() が有効かどうかを確認するには初めて実行する場合は、useRef() フックを使用します。 useRef() は可変値を格納します。この場合、初期レンダリングかどうかを追跡できます。

useLayoutEffect の使用

componentDidUpdate() と同じフェーズでエフェクトが発生する必要がある場合は、useLayoutEffect の使用を検討してください。 （） の代わりにuseEffect().

例

次のコードは、useRef():

const { useState, useRef, useLayoutEffect } = React;

function ComponentDidUpdateFunction() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

このコードでは:

1. useState() を使用するコンポーネント関数を定義します。カウント状態を管理し、最初の更新を追跡する useRef() フックを使用します。
2. useLayoutEffect() を利用して、componentDidUpdate() と同じフェーズでエフェクトを実行します。
3. エフェクトの内部、それが最初の更新であるかどうかを確認します (firstUpdate.current が true である)。その場合、firstUpdate.current を false に設定し、効果が実行されないように早めに戻ります。

このコードを実行すると、「componentDidUpdateFunction」が最初のレンダリング後にのみ記録されることがわかります。ボタンをクリックすると、componentDidUpdate().

以上がReact の初期レンダリングで「useEffect」が実行されないようにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。