如何防止 React useEffect Hook 在初始渲染上运行？

防止 React useEffect Hook 在初始渲染上运行

useEffect hook 是管理 React 组件中副作用的一个有价值的工具。但是，默认情况下，它会在每次渲染后运行，包括第一次渲染。这可能会导致不需要的行为，如示例代码所示。为了克服这个问题，有两种有效的策略。

1。使用 useRef Hook 来跟踪初始渲染

useRef Hook 允许我们存储在重新渲染期间持续存在的可变值。通过利用这一点，我们可以跟踪 useEffect 函数是否是第一次执行。

示例：

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

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

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

2.利用useLayoutEffect Hook

引入useLayoutEffect Hook来模拟componentDidUpdate在执行阶段的行为。它在浏览器绘制之前运行，防止出现任何视觉故障。

示例：

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

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

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

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