揭秘 useLayoutEffect：解决UI闪烁的终极武器

为什么需要 useLayoutEffect？React 隐藏的同步能力

在 React 的 Hooks 生态中，useEffect 无疑是明星成员，但它的兄弟 useLayoutEffect 却常被忽视。理解这个Hook的独特能力，将帮你解决那些令人头疼的UI闪烁问题！

核心差异：执行时机决定一切

graph TD A[React 组件渲染] --> B[DOM 更新] B --> C[useLayoutEffect 执行] C --> D[浏览器绘制页面] D --> E[useEffect 执行]

关键区别：

useEffect：在浏览器绘制后异步执行（不阻塞渲染）
useLayoutEffect：在DOM更新后、浏览器绘制前同步执行（阻塞渲染）

解决核心痛点：UI闪烁问题

场景1：布局抖动（防闪烁）

jsx 复制代码

function FlashingComponent() {
  const [isExpanded, setIsExpanded] = useState(false);
  const divRef = useRef(null);

  // ❌ 错误方式：使用 useEffect 导致闪烁
  useEffect(() => {
    if (isExpanded) {
      divRef.current.style.height = '200px';
    }
  }, [isExpanded]);

  // ✅ 正确方式：使用 useLayoutEffect 消除闪烁
  useLayoutEffect(() => {
    if (isExpanded) {
      divRef.current.style.height = '200px';
    }
  }, [isExpanded]);

  return (
    <div ref={divRef}>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '折叠' : '展开'}
      </button>
    </div>
  );
}

为什么有效：在浏览器绘制前完成DOM操作，用户看不到中间状态

场景2：精确获取元素尺寸

jsx 复制代码

function MeasureComponent() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const ref = useRef(null);

  useLayoutEffect(() => {
    // 同步获取最新尺寸
    const rect = ref.current.getBoundingClientRect();
    setSize({
      width: rect.width,
      height: rect.height
    });
  }, []);

  return (
    <div ref={ref}>
      当前尺寸: {size.width} x {size.height}
    </div>
  );
}

高级应用：平滑动画实现

jsx 复制代码

function AnimatedBox() {
  const boxRef = useRef(null);
  const [position, setPosition] = useState(0);

  useLayoutEffect(() => {
    // 1. 重置位置（避免动画从错误位置开始）
    boxRef.current.style.transform = `translateX(0px)`;
    
    // 2. 强制布局计算
    const rect = boxRef.current.getBoundingClientRect();
    
    // 3. 设置最终位置
    boxRef.current.style.transition = 'transform 0.3s ease';
    boxRef.current.style.transform = `translateX(${position}px)`;
  }, [position]);

  return (
    <div>
      <div 
        ref={boxRef}
        style={{ width: 100, height: 100, background: 'blue' }}
      />
      <button onClick={() => setPosition(prev => prev + 100)}>
        向右移动
      </button>
    </div>
  );
}

性能警示：双刃剑的正确握法

虽然强大，但需谨慎使用：

jsx 复制代码

// 🚨 危险示例：复杂计算阻塞渲染
useLayoutEffect(() => {
  // 避免在此执行耗时操作
  const data = processLargeArray(largeDataSet); // ⚠️ 阻塞页面渲染！
  
  // 应该改用 useEffect 或 Web Worker
}, [largeDataSet]);

最佳实践：

仅用于DOM测量和同步UI更新
计算量大的操作改用 useEffect
优先使用CSS解决方案（如CSS transitions）

SSR特殊处理：避免服务端渲染报错

jsx 复制代码

// 通用解决方案：条件执行
const useIsomorphicLayoutEffect = 
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

function SafeComponent() {
  useIsomorphicLayoutEffect(() => {
    // 仅在客户端执行
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return <div>响应式组件</div>;
}

真实案例：下拉菜单定位

jsx 复制代码

function DropdownMenu() {
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const triggerRef = useRef(null);
  const menuRef = useRef(null);

  useLayoutEffect(() => {
    if (triggerRef.current && menuRef.current) {
      const triggerRect = triggerRef.current.getBoundingClientRect();
      const menuRect = menuRef.current.getBoundingClientRect();
      
      // 防止菜单超出视口
      const top = triggerRect.bottom + window.scrollY;
      const left = Math.min(
        triggerRect.left,
        window.innerWidth - menuRect.width
      );
      
      setPosition({ top, left });
    }
  }, []);

  return (
    <div>
      <button ref={triggerRef}>菜单</button>
      <div 
        ref={menuRef}
        style={{
          position: 'absolute',
          top: `${position.top}px`,
          left: `${position.left}px`,
          display: 'block'
        }}
      >
        {/* 菜单内容 */}
      </div>
    </div>
  );
}

决策流程图：何时使用 useLayoutEffect

graph TD A[需要操作DOM吗？] -->|否| B[使用 useEffect] A -->|是| C{用户能看到中间状态吗？} C -->|会看到闪烁| D[使用 useLayoutEffect] C -->|看不到| E[使用 useEffect] D --> F[操作是否耗时？] F -->|是| G[考虑优化或拆分] F -->|否| H[安全使用]

总结：掌握UI同步的艺术

useLayoutEffect 是React工具箱中的精密仪器，它允许你：

🛑 消除UI闪烁 - 在用户看到不一致状态前完成更新
📏 精准测量DOM - 同步获取最新布局信息
🎬 创建流畅动画 - 精确控制动画开始和结束状态

黄金法则 ：当你的UI更新需要与浏览器渲染同步进行时，请选择useLayoutEffect；对于数据获取、日志记录等异步操作，坚持使用useEffect。

"在React的世界里，useLayoutEffect是那些需要像素级完美UI的守护者。它不常露面，但一旦出场，必定解决最棘手的渲染难题。"