什么时候会触发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 在浏览器重绘屏幕之前触发，我不明白。screenshot

Answer 1

useLayoutEffect

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

最初渲染了

CompA

，

count

 的初始状态为 0。

然后您点击了

div

 广告，计数增加到 1。

由于

useLayoutEffect

 是在 DOM 更新后 

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

CompA layoutEffectCallback

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

useLayoutEffect

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