作为 React Hooks 中的“冷门明星”，
useLayoutEffect并不常被初学者提起，但在某些高性能渲染与同步布局场景中却有着无可替代的作用。本文将带你深入理解useLayoutEffect的底层原理、使用时机和最佳实践。
🎯 一、什么是 useLayoutEffect？
useLayoutEffect 是 React 提供的一个 Hook，用于在 DOM 变更后、浏览器绘制前 执行副作用操作。和 useEffect 相比，它的执行时机更早——在 React 更新 DOM 后立即同步调用，不会等待浏览器绘制。
import { useLayoutEffect } from 'react';
useLayoutEffect(() => {
// 执行同步 DOM 操作或测量
}, [dependencies]);
🆚 二、useLayoutEffect vs useEffect
| 特性 | useEffect | useLayoutEffect |
|---|---|---|
| 执行时机 | 浏览器绘制后执行 | DOM 更新后、绘制前同步执行 |
| 是否阻塞渲染流程 | 否（异步） | 是（同步，阻塞浏览器绘制） |
| 使用场景 | 数据获取、订阅、日志 | DOM 测量、滚动定位、动画控制 |
| 性能影响 | 较小 | 可能引起页面卡顿（慎用） |
总结一句话：如果你的副作用不需要立即同步影响 DOM，可以用 useEffect；如果需要立即“测量或修改 DOM”以避免闪动或错位，则必须用 useLayoutEffect。
💡 三、什么场景应该使用 useLayoutEffect？
1. 精准测量 DOM 布局
比如你需要读取某个元素的宽高、位置，并依赖这些信息进行计算或布局：
useLayoutEffect(() => {
const { width, height } = ref.current.getBoundingClientRect();
console.log('元素尺寸：', width, height);
}, []);
2. 滚动位置还原/控制
在切换路由或组件更新时控制滚动行为，防止闪动：
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, [pathname]); // 路由变化时重置滚动
3. 动画控制与布局同步
配合动画库，如 GSAP 或 Framer Motion，精细控制动画开始前的状态：
useLayoutEffect(() => {
gsap.fromTo(ref.current, { opacity: 0 }, { opacity: 1, duration: 0.5 });
}, []);
⚠️ 四、使用 useLayoutEffect 的注意事项
💥 最重要的提示：不要滥用！
✅ 正确使用时机：
- 当你的副作用必须在 DOM 更新后立刻执行。
- 在涉及 测量布局、动画过渡、同步样式更新 时。
❌ 避免以下误区：
- 不要用于数据请求，这完全属于
useEffect的范畴。 - 避免阻塞主线程，影响性能，尤其是在大型应用中。
- 服务端渲染（SSR）时要特别注意：由于服务端没有 DOM，
useLayoutEffect会产生警告。可以使用如下兼容方案：
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect;
🛠️ 五、实战案例：实现一个稳定无闪动的弹窗动画
假设我们要实现一个弹窗组件，在弹窗打开后根据内容计算定位并做一个平滑展开动画。
function Modal({ show }) {
const modalRef = useRef();
useLayoutEffect(() => {
if (show && modalRef.current) {
const rect = modalRef.current.getBoundingClientRect();
console.log('弹窗尺寸：', rect.width, rect.height);
// 使用 GSAP 控制动画
gsap.fromTo(
modalRef.current,
{ scale: 0.8, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.3 }
);
}
}, [show]);
return show ? (
<div className="modal" ref={modalRef}>
这是一个弹窗
</div>
) : null;
}
使用 useLayoutEffect，确保测量和动画都在浏览器绘制之前执行，避免“闪动”问题。
🧩 六、是否可以全用 useEffect 替代？
通常不推荐。虽然在部分简单场景中 useEffect 也能“凑合”使用，但：
useLayoutEffect保证了执行顺序在绘制前。- 依赖 DOM 测量和同步逻辑，不应延迟执行。
所以，能用 useEffect 就用，必须用 useLayoutEffect 时不要犹豫。
📌 七、结语
虽然 useLayoutEffect 并不常在普通开发中频繁使用，但它在需要 DOM 精准控制时，是一个非常强大的工具。正确理解它与 useEffect 的区别，掌握它的使用时机，可以让你的 React 应用更加流畅且稳定。
一行总结：
useLayoutEffect是为了解决“DOM 变更后立即同步操作”的场景而生的，不是用来取代useEffect的。
📎 推荐阅读
如果你觉得这篇文章对你有帮助，欢迎 👍 点赞 + 🧠 收藏 + 💬 评论，让更多人了解 useLayoutEffect 的正确打开方式！
