useEffect 和 useLayoutEffect 的区别

23,778 阅读1分钟

在 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>
  );
}

11

运行上面的组件,点击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>
  );
}

22

闪烁消失了。

相比使用 useEffect,当你点击 div,count 更新为 0,此时页面并不会渲染,而是等待 useLayoutEffect 内部状态修改后,才会去更新页面,所以页面不会闪烁。

总结

  1. useLayoutEffect 相比 useEffect,通过同步执行状态更新可解决一些特性场景下的页面闪烁问题。
  2. useEffect 可以满足百分之99的场景,而且 useLayoutEffect 会阻塞渲染,请谨慎使用。

Reference

When to useLayoutEffect Instead of useEffect