如何防止`useEffect`在React中的初始渲染上运行？

防止 useEffect 在初始渲染上运行

React 的 useEffect() 钩子模仿了 componentDidUpdate() 的行为，包括每次渲染后的调用。然而，与 componentDidUpdate() 不同的是，useEffect() 即使在初始渲染时也会运行。本文解决了如何纠正此问题并防止 useEffect() 在初始渲染阶段执行。

使用 useRef Hook

来确定 useEffect() 是否为第一次运行，使用 useRef() 钩子。 useRef() 存储可变值。在这种情况下，它可以跟踪是否是初始渲染。

使用 useLayoutEffect

如果效果应该与 componentDidUpdate() 在同一阶段发生，请考虑使用 useLayoutEffect () 代替useEffect().

示例

以下代码演示了如何使用 useRef() 阻止 useEffect() 在初始渲染上运行：

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() 的行为。

以上是如何防止`useEffect`在React中的初始渲染上运行？的详细内容。更多信息请关注PHP中文网其他相关文章！