React useLayoutEffect
1. useLayoutEffect 基本概念
useLayoutEffect 是 React 的一个 Hook，它的函数签名与 useEffect 完全相同，但它会在所有的 DOM 变更之后同步调用 effect。它可以用来读取 DOM 布局并同步触发重渲染。
2. useLayoutEffect vs useEffect
2.1 执行时机对比
| Hook 名称 | 执行时机 | 执行方式 | 使用场景 |
|---|---|---|---|
| useEffect | DOM 更新后且浏览器重新绘制屏幕之后异步执行 (组件渲染完成后) | 异步执行，不阻塞浏览器渲染 | 大多数副作用，如数据获取、订阅 |
| useLayoutEffect | DOM 更新后且浏览器重新绘制屏幕之前同步执行（组件将要渲染时） | 同步执行，会阻塞浏览器渲染 | 需要同步测量 DOM 或更新布局 |
2.2 执行顺序示例
function ExampleComponent() {const [count, setCount] = useState(0);useEffect(() => {console.log('useEffect 执行'); // 后执行});useLayoutEffect(() => {console.log('useLayoutEffect 执行'); // 先执行});return (<div onClick={() => setCount(c => c + 1)}>点击次数：{count}</div>);
}
3. useLayoutEffect 使用场景
3.1 DOM 测量和更新
function AutoHeight() {const [height, setHeight] = useState(0);const elementRef = useRef();useLayoutEffect(() => {// 在 DOM 更新后立即测量高度const element = elementRef.current;const elementHeight = element.getBoundingClientRect().height;if (elementHeight !== height) {// 立即更新高度，避免闪烁setHeight(elementHeight);}}, [height]);return (<div><div ref={elementRef} style={{ height: height || 'auto' }}>内容</div><div>当前高度: {height}px</div></div>);
}
3.2 防止闪烁的工具提示
function Tooltip({ text, position }) {const tooltipRef = useRef();const [tooltipPosition, setTooltipPosition] = useState(position);useLayoutEffect(() => {const tooltip = tooltipRef.current;const rect = tooltip.getBoundingClientRect();// 检查是否超出视口if (rect.right > window.innerWidth) {// 立即调整位置，避免闪烁setTooltipPosition({...position,left: position.left - (rect.right - window.innerWidth)});}}, [position]);return (<divref={tooltipRef}style={{position: 'absolute',...tooltipPosition}}>{text}</div>);
}
3.3 动画处理
function AnimatedComponent() {const elementRef = useRef();const [isVisible, setIsVisible] = useState(false);useLayoutEffect(() => {if (isVisible) {const element = elementRef.current;// 立即设置初始状态element.style.opacity = '0';element.style.transform = 'translateY(20px)';// 强制重排element.getBoundingClientRect();// 应用动画element.style.transition = 'opacity 0.5s, transform 0.5s';element.style.opacity = '1';element.style.transform = 'translateY(0)';}}, [isVisible]);return (<div><button onClick={() => setIsVisible(true)}>显示</button><div ref={elementRef}>动画内容</div></div>);
}
3.4 滚动位置同步
function ScrollSync({ content }) {const scrollContainerRef = useRef();useLayoutEffect(() => {const element = scrollContainerRef.current;// 内容更新后立即滚动到底部element.scrollTop = element.scrollHeight;}, [content]); // 当内容更新时执行return (<div ref={scrollContainerRef}style={{ height: '200px', overflow: 'auto' }}>{content.map((item, index) => (<div key={index}>{item}</div>))}</div>);
}
3.5 Modal 定位
function Modal({ isOpen, children }) {const modalRef = useRef();useLayoutEffect(() => {if (isOpen) {const modalElement = modalRef.current;const viewportHeight = window.innerHeight;const modalHeight = modalElement.getBoundingClientRect().height;// 立即计算并设置最佳位置modalElement.style.top = \`\${Math.max(0,(viewportHeight - modalHeight) / 2)}px\`;}}, [isOpen]);if (!isOpen) return null;return (<div className="modal-overlay"><div ref={modalRef} className="modal">{children}</div></div>);
}
4. 性能考虑
4.1 何时使用 useLayoutEffect
- 需要同步测量 DOM 元素
- 需要在视觉更新前进行 DOM 修改
- 需要避免闪烁或布局抖动
- 处理依赖于 DOM 布局的动画
4.2 何时使用 useEffect
- 数据获取
- 订阅事件
- 日志记录
- 其他不需要同步 DOM 测量或修改的副作用
5. 最佳实践
- 优先使用 useEffect
// ✅ 大多数情况下使用 useEffect 即可
useEffect(() => {// 异步操作，不影响渲染fetchData();
}, []);
- 仅在必要时使用 useLayoutEffect
// ✅ 需要同步 DOM 测量和更新时使用 useLayoutEffect
useLayoutEffect(() => {// 同步操作，立即更新 DOMupdateDOMPosition();
}, []);
- 注意性能影响
// ❌ 避免在 useLayoutEffect 中进行耗时操作
useLayoutEffect(() => {// 不要在这里进行大量计算或 API 调用heavyComputation();
}, []);// ✅ 耗时操作应该放在 useEffect 中
useEffect(() => {heavyComputation();
}, []);
- 合理使用依赖项
function OptimizedComponent({ data }) {useLayoutEffect(() => {// 只在真正需要同步更新的依赖项发生变化时执行}, [data.layout]); // 只依赖布局相关的属性
}
6. 注意事项
- useLayoutEffect 在服务器端渲染（SSR）中会收到警告，因为它只能在客户端执行
- 过度使用 useLayoutEffect 可能会导致性能问题
- 应该将耗时的操作放在 useEffect 中，只在 useLayoutEffect 中处理视觉相关的同步更新
- 在条件语句中使用时需要注意 Hook 规则
通过合理使用 useLayoutEffect 和 useEffect，我们可以更好地控制副作用的执行时机，优化用户体验，同时保持应用的性能。在实际开发中，应该根据具体场景选择合适的 Hook。
