前端 - React - - useEffect和useLayoutEffect的区别
useEffect和useLayoutEfeect都是处理副作用函数，他俩的区别是在执行时间与事件机制上。
1. 核心区别：
useEffect（异步执行）：在浏览器绘制完成之后异步执行。它不会阻塞浏览器的视觉更新，适合用于获取数据、事件绑定、日志记录等不直接影响当前帧 UI 的操作。useLayoutEffect（同步执行）：在浏览器绘制之前同步执行。它会阻塞浏览器的渲染，直到回调执行完毕。适合用于需要直接操作 DOM 样式、测量 DOM 尺寸，且需要避免 UI 闪烁的场景。
2. 分步分析执行时机
为了直观理解，我们看一下 React 组件更新时的完整时间线：
触发更新：State 或 Props 改变。
Render 阶段：React 执行组件函数，计算 Virtual DOM。
Commit 阶段：React 将 Virtual DOM 变更映射到真实的 DOM 节点（此时 DOM 已更新，但屏幕尚未绘制）。
useLayoutEffect执行（同步阻塞）：React 在此处立即执行所有useLayoutEffect回调。浏览器绘制（Paint）：浏览器终于将 DOM 节点绘制到屏幕上（变成像素）。
useEffect执行（异步）：React 在浏览器绘制完成后，利用requestIdleCallback或微任务机制，延迟执行useEffect回调。
核心结论：useLayoutEffect执行时，你可以拿到最新的 DOM 节点，但屏幕还是旧的（还没画）；useEffect执行时，屏幕已经变成新的了。
常见问题：使用useEffect时，会出现页面闪烁问题：
假设你有一个组件，渲染时依赖某个 DOM 节点的宽度，且该宽度需要动态计算后设置高度。
如果用useEffect（错误示例）：
function BrokenComponent() { const ref = useRef(); useEffect(() => { const height = ref.current.getBoundingClientRect().width; ref.current.style.height = `${height}px`; // 修改 DOM }, []); return <div ref={ref}>内容</div>; }页面会先渲染旧的高度（比如高度为0），然后瞬间“跳”到计算后的新高度。用户会看到明显的抖动或闪烁。
如果用useLayoutEffect（正确示例）：
function FixedComponent() { const ref = useRef(); useLayoutEffect(() => { const height = ref.current.getBoundingClientRect().width; ref.current.style.height = `${height}px`; }, []); return <div ref={ref}>内容</div>; }React 在绘制前就修改了高度，浏览器绘制时直接使用了最终尺寸，用户看到的是稳定且平滑的界面。
注意：在 SSR 环境下（服务端渲染），useLayoutEffect会抛出警告（Warning:useLayoutEffectdoes nothing on the server）。因为在服务端没有 DOM 和 Paint 的概念，React 会自动降级为useEffect。