在 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 内部状态修改后，才会去更新页面，所以页面不会闪烁。

总结

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

Reference

When to useLayoutEffect Instead of useEffect