什么时候会触发useLayoutEffect钩子回调？

Question

我有一个问题，什么时候会触发

useLayoutEffect

回调，什么时候会绘制屏幕。

考虑以下代码：

export default function CompA() {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    // I'll debug here after initial render 
    console.log('CompA layoutEffectCallback');
  });

  useEffect(() => {
    console.log('CompA updateEffectCallback');
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div onClick={handleClick}>
      CompA
      <h1>{count}</h1>
    </div>
  );
}

初始渲染后，屏幕显示数字 0，然后在单击 div 之前，我在

useLayoutEffect

钩子的回调中设置了 chrome devtool 调试器。单击后，函数执行在调试器处暂停，但我看到屏幕已显示数字 1。

文档说

useLayoutEffect

在浏览器重新绘制屏幕之前触发，但我不明白为什么屏幕更新了。

Answer 1

useLayoutEffect

callback 中的暂停/断点不会阻止/阻止浏览器重新绘制。它只是一个您可以“挂钩”并应用一些逻辑的地方，例如在浏览器重新绘制之前测量计算的 DOM。不管怎样，你仍然会看到更新后的 DOM 和重新绘制的视图。

这是一个方便但有点过时的 React 组件生命周期图：

useLayoutEffect

 在“预提交阶段”中被调用，可以检查计算出的 DOM。 

useEffect 将在“提交阶段”之后/之后调用。

Answer 2

钩子在DOM更新之后、浏览器重新绘制之前同步运行

。

最初，您渲染了 CompA，

count

的初始状态为 0。然后，您单击

div

，

count

增加到 1。由于

useLayoutEffect

是在 DOM 更新后运行的

 在重绘之前，布局效果将在浏览器执行绘制之前记录 

CompA layoutEffectCallback。这就是为什么即使调试器在 useLayoutEffect

 中暂停，您也会看到屏幕显示“1”。在通知浏览器渲染之前，DOM 已经更新为新状态。