86. useEffect vs useLayoutEffect

goldEli commented 5 years ago

useEffect 和 useLayoutEffect 有什么用，它们有什么区别。

zlx362211854 commented 5 years ago

useLayoutEffect会和浏览器渲染同步执行，而useEffect会等浏览器渲染完了再执行

nanslee commented 5 years ago

一般情况下都使用 useEffect，但是当涉及到在渲染/更新的回调中操作 Dom 时为避免出现页面抖动再考虑使用 useLayoutEffect，useLayoutEffect 会在 Dom 更新完毕后立即同步触发（即会阻塞页面绘制），而 useEffect 不会阻塞页面绘制，可以算作异步吧。
总之正常情况下均推荐使用 useEffect。

goldEli commented 5 years ago

在 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

zlx362211854 / daily-study

86. useEffect vs useLayoutEffect #137

总结

Reference