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>
  );
}
复制代码

闪烁消失了。

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

总结

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

Reference

When to useLayoutEffect Instead of useEffect