React 的 useLayoutEffect 保证：其内部的代码以及期间触发的 state 更新都一定在浏览器“重绘（repaint）”之前完成。这意味着在浏览器实际呈现画面给用户之前，组件有机会基于最新的布局数据（比如元素的尺寸和位置等）来进行计算和同步 UI，这样做用户看不到任何“闪烁”或“跳变”。
原理详解
-
执行时机
useLayoutEffect在 DOM 更新（即本次 React 渲染周期内所有 DOM 变更已应用）后立即同步执行，但在浏览器实际把变化渲染到屏幕前。- 这时，DOM 已完成变更，但还没显示，因此可以安全地读取或修改布局信息（如宽高、滚动位置等），也可以基于这些信息同步触发 setState 进一步调整布局，浏览器会合并所有变动统一渲染，无“闪烁”现象。
-
典型用法
- 读取 DOM 布局信息（如 getBoundingClientRect、offsetWidth、高度等），并据此调整样式、位置。
- 立即修改 DOM（如手动滚动到某位置、聚焦输入框、动画初始状态等），用户不会发现“跳动”。
- 例如动态气泡/弹窗，根据目标元素位置调整自己，然后再呈现，可以避免位置跳动或先错位后校正的问题。
-
和 useEffect 的区别
useEffect只保证在“组件显示到屏幕之后”异步执行，不能做到页面刷新前获取最新 layout，也无法无痕处理“第一次渲染闪烁”。useLayoutEffect则同步执行、可阻断渲染，适合需要确保布局数据和页面状态在视觉呈现前就同步的场景。
例子
import { useLayoutEffect, useRef, useState } from 'react';
function Tooltip({ targetRect }) {
const ref = useRef();
const [tooltipHeight, setTooltipHeight] = useState(0);
useLayoutEffect(() => {
setTooltipHeight(ref.current.getBoundingClientRect().height);
}, []);
// 根据 targetRect 和 tooltipHeight 计算气泡位置
// 返回的渲染会立刻用上最新布局数据，不会闪烁
...
}
在这个例子中，useLayoutEffect 获取气泡高度并设置状态，这些都在浏览器重绘前完成，所以气泡可以一次性呈现在正确位置。
小结
useLayoutEffect适用于任何需要视觉无缝同步 layout的场景。- 一切在其中的读写、状态变更都确保在“眼睛见到页面前”完成，结果就是组件可以精确控制最终“展现出来的样子”。当使用 React 的
useLayoutEffect时，React 保证这个 hook 里的代码，包括期间触发的任何状态更新，都会在浏览器完成屏幕重绘（repaint）之前被处理完。
这意味着什么？
- React 渲染后，首先应用所有 DOM 变更，然后马上同步执行
useLayoutEffect。只有等这些代码及产生的状态更新全部完成后，浏览器才会把变化展示在屏幕上。 - 这让开发者可以读取和操作最新的 DOM 布局信息（比如元素尺寸、位置等），并且能马上对这种信息产生反应（比如设置新的样式或调整状态值），用户永远看不到“先错位再跳到目标位置”的中间态。
- 典型用途包括：测量元素尺寸、同步动画位置、滚动条控制、避免页面闪烁等非常依赖 DOM 最新状态的场景。这样可以确保渲染结果和预期完全一致。
简单例子
useLayoutEffect(() => {
const width = ref.current.offsetWidth;
setWidth(width);
}, []);
这里 setWidth 会立即同步更新，在本次浏览器重绘前完成，渲染出来的内容就能依赖这个“最新”宽度结果，不会闪烁。
总结
useLayoutEffect 是保证页面视觉一致性、避免“闪烁/跳变”最强力的同步钩子，是需要依赖布局信息进行渲染时的必选方案，而 useEffect 只适用于不影响首次展示体验的副作用处理。
