React useEffect vs useLayoutEffect

两者的区别

两者的函数签名是一样的，即用法一样。两者的区别在于执行时机不同。

• useEffect是在DOM的变化渲染到屏幕后异步执行的
• useLayoutEffect是在DOM变化后渲染前同步执行的

因此从执行时机上看，useLayoutEffect要早于useEffect执行。

举个例子

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

  useEffect(() => {
    console.log("USE EFFECT FUNCTION TRIGGERED");
  });

  useLayoutEffect(() => {
    console.log("USE LAYOUT EFFECT FUNCTION TRIGGERED");
  });

  return (
    <div className="App">
      <h1>{count}</h1>
      <h2>
        <button onClick={() => setCount(count => count + 1)}>
          Update Count
        </button>
      </h2>
    </div>
  );
}

当点击按钮将计数增加时，USE LAYOUT EFFECT FUNCTION TRIGGERED会率先打印。

使用建议

• 由于useEffect是异步执行，不会阻塞UI的渲染，尤其是副作用中包含有大量计算时，使用useEffect在性能上要比useLayoutEffect更好。因此useEffect是我们大多数时候的选择。
• useEffect也有一些不适应的场景，比如在副作用中更改DOM时可能会导致页面抖动，因为触发了两次页面的绘制。此时应该考虑使用useLayoutEffect。

总结

useEffect是我们处理副作用时的第一选择，仅当我们需要在页面渲染前进行DOM的操作以防止页面抖动（尤其是涉及到动画相关）时使用useLayoutEffect。