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. 最佳实践

1. 优先使用 useEffect

// ✅ 大多数情况下使用 useEffect 即可
useEffect(() => {// 异步操作，不影响渲染fetchData();
}, []);

2. 仅在必要时使用 useLayoutEffect

// ✅ 需要同步 DOM 测量和更新时使用 useLayoutEffect
useLayoutEffect(() => {// 同步操作，立即更新 DOMupdateDOMPosition();
}, []);

3. 注意性能影响

// ❌ 避免在 useLayoutEffect 中进行耗时操作
useLayoutEffect(() => {// 不要在这里进行大量计算或 API 调用heavyComputation();
}, []);// ✅ 耗时操作应该放在 useEffect 中
useEffect(() => {heavyComputation();
}, []);

4. 合理使用依赖项

function OptimizedComponent({ data }) {useLayoutEffect(() => {// 只在真正需要同步更新的依赖项发生变化时执行}, [data.layout]); // 只依赖布局相关的属性
}

6. 注意事项

1. useLayoutEffect 在服务器端渲染（SSR）中会收到警告，因为它只能在客户端执行
2. 过度使用 useLayoutEffect 可能会导致性能问题
3. 应该将耗时的操作放在 useEffect 中，只在 useLayoutEffect 中处理视觉相关的同步更新
4. 在条件语句中使用时需要注意 Hook 规则

通过合理使用 useLayoutEffect 和 useEffect，我们可以更好地控制副作用的执行时机，优化用户体验，同时保持应用的性能。在实际开发中，应该根据具体场景选择合适的 Hook。