React useLayoutEffect 和 useEffect 有什么区别？

Question

仓乃文 · Accepted Answer

useLayoutEffect 在 DOM 更新完成后同步执行，会阻塞浏览器绘制；useEffect 在浏览器绘制后异步执行。需要读取 DOM 布局或同步修改 DOM 的场景用 useLayoutEffect，否则用 useEffect。闪烁问题场景： ```javascript function Tooltip() { const ref = useRef(null); const [position, setPosition] = useState({ top: 0, left: 0 }); // useEffect：先渲染在 (0,0)，再跳到正确位置 → 视觉闪烁 // useLayoutEffect：在绘制前计算位置 → 用户看不到闪烁 useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); setPosition({ top: rect.bottom, left: rect.left }); }, []); return

提示文字

; } ``` 执行顺序对比： ```javascript // 1. React 更新 DOM // 2. useLayoutEffect 同步执行（阻塞绘制） // 3. 浏览器绘制屏幕 // 4. useEffect 异步执行（不阻塞绘制） ``` 补充说明： - useLayoutEffect 会阻塞绘制，只在需要同步读取/修改 DOM 时使用 - 大多数场景用 useEffect 就够了，useLayoutEffect 是解决视觉闪烁的利器 - SSR 中 useLayoutEffect 会报警告，可以用 useEffect 替代或用 useIsomorphicLayoutEffect - 常见使用场景：tooltip 定位、自动聚焦、测量元素尺寸、同步动画初始值