深入理解 React 的 useLayoutEffect Hook 🔍

绅士玖
122 阅读4分钟

引言

在 React 的 Hooks 世界中，useLayoutEffect 是一个强大但容易被误解的工具。本文将全面剖析这个 Hook，帮助你理解它的工作原理、使用场景以及常见陷阱。让我们一起来探索这个"布局效果"Hook 的奥秘吧！

1. 什么是 useLayoutEffect？ 🤔

useLayoutEffect 是 React 提供的一个 Hook，它的签名与 useEffect 完全相同，但调用的时机不同，它是在浏览器重新绘制屏幕之前触发。

useLayoutEffect(setup, dependencies?)

基本用法

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // 这里的代码会在 DOM 更新后、浏览器绘制前执行
    return () => {
      // 清理函数（可选）
    };
  }, [dependencies]);
}

2. useLayoutEffect 与 useEffect 的区别 ⏱️

理解两者的区别是掌握 useLayoutEffect 的关键：

特性useEffectuseLayoutEffect
执行时机异步，在浏览器绘制后同步，在浏览器绘制前
阻塞绘制否是
适用场景数据获取、订阅等DOM 测量或操作
服务端渲染可以安全使用会警告（应避免）

执行流程图

useLayoutEffect的执行流程.png

3. 为什么需要 useLayoutEffect？ 🛠️

useLayoutEffect 主要用于需要同步读取或操作 DOM 的场景。常见用例包括：

  1. 测量 DOM 元素（如宽度、高度、位置）
  2. 同步 DOM 操作（如基于测量结果调整布局）
  3. 防止视觉闪烁（在用户看到不一致状态前完成操作）

4. 实战示例 🏗️

示例1：测量元素尺寸

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

  useLayoutEffect(() => {
    // 只有在 divRef.current 存在时测量
    if (divRef.current) {
      setSize({
        width: divRef.current.offsetWidth,
        height: divRef.current.offsetHeight
      });
    }
  }, []); // 空依赖数组表示只在挂载时运行

  return (
    <div ref={divRef}>
      <p>宽度: {size.width}px</p>
      <p>高度: {size.height}px</p>
    </div>
  );
}

示例2：防止闪烁的动画

function FlashPrevention() {
  const [show, setShow] = useState(false);
  const divRef = useRef(null);

  useLayoutEffect(() => {
    if (divRef.current) {
      // 在元素显示前设置初始样式
      divRef.current.style.opacity = '0';
      divRef.current.style.transition = 'opacity 0.5s';
      
      // 强制同步重绘
      divRef.current.getBoundingClientRect();
      
      // 然后设置最终样式
      divRef.current.style.opacity = '1';
    }
  }, [show]);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      {show && <div ref={divRef}>我会平滑出现，没有闪烁！</div>}
    </div>
  );
}

5. 常见考点与易错点 ⚠️

考点1：执行顺序

function ExecutionOrder() {
  useEffect(() => {
    console.log('useEffect');
  }, []);
  
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);
  
  console.log('render');
  return <div>检查控制台输出</div>;
}
// 输出顺序:
// render
// useLayoutEffect
// useEffect

考点2：服务端渲染问题

useLayoutEffect 在服务端渲染（SSR）中会触发警告，因为它在服务端无法执行。解决方案：

  1. 使用 useEffect 替代（如果效果可以接受）
  2. 动态导入组件（只在客户端渲染）
  3. 使用条件判断：
const useIsomorphicLayoutEffect = 
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

考点3：性能影响

由于 useLayoutEffect 会阻塞浏览器绘制，不当使用会导致性能问题：

// 不好的做法 - 复杂计算阻塞绘制
useLayoutEffect(() => {
  // 大量计算或同步操作
}, [deps]);

// 好的做法 - 将非必要操作移到 useEffect
useLayoutEffect(() => {
  // 必须同步的操作
}, [deps]);

useEffect(() => {
  // 可以异步的操作
}, [deps]);

6. 面试题与答案解析 💼

面试题1：什么时候应该使用 useLayoutEffect 而不是 useEffect？

答案： 应该在使用效果需要同步执行且涉及 DOM 测量或操作时使用 useLayoutEffect。典型场景包括：

  1. 读取或修改 DOM 布局（如元素尺寸、位置）
  2. 执行必须在浏览器绘制前完成的动画
  3. 防止用户看到中间状态（闪烁）

如果效果不需要同步执行，或与 DOM 无关（如数据获取、订阅），则应使用 useEffect。

面试题2：为什么 React 不默认使用 useLayoutEffect？

答案： React 默认使用 useEffect 是因为：

  1. 性能：useLayoutEffect 会阻塞浏览器绘制，可能导致界面卡顿
  2. 服务端渲染：useLayoutEffect 在 SSR 中无法工作
  3. 大多数场景不需要同步：许多副作用可以安全地异步执行

面试题3：如何在服务端渲染中使用类似 useLayoutEffect 的功能？

答案： 有几种解决方案：

  1. 条件 Hook：
const useIsomorphicLayoutEffect = 
  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
  1. 动态导入：使用 next/dynamic（Next.js）或类似技术只在客户端渲染相关组件
  2. 两阶段渲染：先渲染简单版本，客户端再增强

7. 高级技巧与最佳实践 🎯

技巧1：与 useRef 配合使用

function AutoFocusInput() {
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    // 同步聚焦，用户不会看到未聚焦状态
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

技巧2：避免无限循环

function InfiniteLoopExample() {
  const [width, setWidth] = useState(0);
  const ref = useRef(null);

  useLayoutEffect(() => {
    if (ref.current && ref.current.offsetWidth !== width) {
      // 如果不加条件判断，这会创建无限循环
      setWidth(ref.current.offsetWidth);
    }
  }, [width]); // 注意依赖数组

  return <div ref={ref}>{width}</div>;
}

技巧3：性能优化

对于频繁变化的测量，考虑防抖或使用 ResizeObserver：

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

  useLayoutEffect(() => {
    if (!ref.current) return;
    
    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setSize({ width, height });
    });
    
    observer.observe(ref.current);
    
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>Size: {size.width}x{size.height}</div>;
}

8. 总结 📚

useLayoutEffect 是 React Hooks 中一个强大的工具，但需要谨慎使用：

✅ 适用场景：

  • DOM 测量
  • 同步 DOM 操作
  • 防止视觉闪烁

❌ 避免场景：

  • 数据获取
  • 非紧急的副作用
  • 服务端渲染

记住：默认使用 useEffect，只在必要时使用 useLayoutEffect。正确使用这个 Hook 可以解决许多布局和渲染问题，但滥用会导致性能下降。

9. 扩展阅读 📖

  1. React 官方文档 - useLayoutEffect
  2. useEffect vs useLayoutEffect 深度解析
  3. React Hooks 完全指南
  4. 何时使用 useLayoutEffect

希望这篇深度解析能帮助你掌握 useLayoutEffect 的精髓！🚀

avatar
文章
阅读
粉丝