认识 `useLayoutEffect`

useLayoutEffect 是 React 里的一个 Hook。它和 useEffect 很像，都是用来在组件渲染后执行副作用的。

不过，useLayoutEffect 会在浏览器完成绘制之前同步执行。也就是说，它更适合处理那些需要先读取布局、再立刻修改界面的场景。

什么时候用

可以把它理解为一种更“及时”的副作用：

需要测量元素尺寸

需要读取滚动位置

需要在首屏绘制前修正布局

比如你想先拿到某个元素的宽高，再决定它怎么显示，这类需求就很适合放在 useLayoutEffect 里。

和 `useEffect` 的区别

两者最大的区别是执行时机。

useEffect 通常在页面绘制完成后执行

useLayoutEffect 会在绘制前同步执行

因此，useLayoutEffect 更容易避免闪动，但也更容易影响首屏性能。大多数普通副作用，仍然优先用 useEffect 就好。

一个简单例子

import { useLayoutEffect, useRef, useState } from 'react';

export default function Box() {
  const ref = useRef<HTMLDivElement | null>(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    if (ref.current) {
      setWidth(ref.current.offsetWidth);
    }
  }, []);

  return (
    <div>
      <div ref={ref}>内容区域</div>
      <p>宽度：{width}px</p>
    </div>
  );
}

这个例子里，组件先读取元素宽度，再把结果显示出来。因为测量发生得很早，用户看到的界面会更稳定。

总结

useLayoutEffect 适合处理布局相关、且需要尽早执行的副作用。它能帮助你减少界面闪动，但也会增加渲染阻塞的可能。

如果只是一般副作用，优先使用 useEffect。如果确实要和布局打交道，再考虑 useLayoutEffect。

可以把 useLayoutEffect 当成一个更谨慎的选择：

需要同步读写布局时再用

不要把普通数据请求、日志、订阅等任务放进去

如果能用 useEffect 解决，就尽量先用它

这样写通常更平衡，也更容易维护。