useEffect 和 useLayoutEffect 的区别

最新推荐文章于 2025-03-25 19:13:01 发布

小生_web

最新推荐文章于 2025-03-25 19:13:01 发布

阅读量220

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/m0_46486849/article/details/129393594

版权

文章通过一个示例展示了在React中，useEffect和useLayoutEffect的主要区别。当使用useEffect时，页面可能出现闪烁问题，因为状态更新是异步的。而使用useLayoutEffect则能同步更新状态，避免这种闪烁，但它会阻塞渲染，因此应谨慎使用。在大部分情况下，useEffect已经足够应对需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useEffect 和 useLayoutEffect 的区别

在 React hook 中，useEffect 用来取代 componentDidMount 和 componentDidUpdate。主要作用是当页面渲染后，进行一些副作用操作（比如访问 DOM，请求数据）。

而 useLayoutEffect 的作用和 useEffect 几乎差不多，你把你现有代码的 useEffect 全部替换成 useLayoutEffect，你几乎看不到任何差别。

那它们的区别是什么？看如下代码：

function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random()*200
      setCount(10 + Math.random()*200);
    }
  }, [count]);

  return (
      <div onClick={() => setCount(0)}>{count}</div>
  );
}

在这里插入图片描述

运行上面的组件，点击div，页面会更新一串随机数。

当你连续点击时，你会发现这串数字在发生抖动。

原因在于，当你每次点击 div， count 会更新为 0，之后 useEffect 内又把 count 改为一串随机数。

所以页面会先渲染成0，然后再渲染成随机数，由于更新很快，所以出现了闪烁。

接下来我们将 useEffect 改为 useLayoutEffect：

function App() {
  const [count, setCount] = useState(0);
  
  useLayoutEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random()*200
      setCount(10 + Math.random()*200);
    }
  }, [count]);

  return (
      <div onClick={() => setCount(0)}>{count}</div>
  );
}