useLayoutEffect: React渲染流程中的秘密武器 —— 深入理解原理与应用场景

爱学习的茄子
127 阅读6分钟

碎碎念

啊，React Hooks，这个让初级开发者又爱又恨的东西！如果说useState和useEffect是React派对上的"网红"，那useLayoutEffect就像是那个低调却很有实力的朋友，不常被提起，但关键时刻能救你于水火。在React技术面试中，面试官经常会丢出"说说useLayoutEffect与useEffect的区别"这个问题，就像丢出一块试金石，立刻把候选人分成两拨：一拨只会说"执行时机不同"然后眼神飘忽；另一拨能侃侃而谈其原理和使用场景，让面试官不自觉点头微笑。本文就是要帮你成为后者，深入剖析useLayoutEffect的工作机制、与useEffect的本质区别、性能影响及最佳实践，让你下次面试时能够自信满满，仿佛在说："这不就是个同步执行的effect嘛，小意思～"

React 的渲染流程

理解useLayoutEffect首先需要了解React的渲染流程。React渲染主要分为三个阶段：

  1. 渲染阶段(Render Phase) - 计算DOM变更
  1. 提交阶段(Commit Phase) - 将变更应用到DOM
  1. 浏览器绘制阶段(Paint Phase) - 浏览器将更新后的DOM绘制到屏幕

这三个阶段的执行顺序和时机直接影响着用户体验，也正是useEffect和useLayoutEffect区别的关键所在。

useEffect vs useLayoutEffect

执行时机

useEffect:

  • 在组件渲染完成之后异步执行
  • 不会阻塞页面的渲染过程

useLayoutEffect:

  • 在DOM更新之后、浏览器绘制之前同步执行
  • 会阻塞页面的渲染过程，直到回调函数执行完毕

从React源码层面看，useEffect被调度到了requestIdleCallback或setTimeout中执行，而useLayoutEffect则是同步执行，类似于传统class组件中的componentDidMount和componentDidUpdate。

内部实现差异

虽然两者API完全相同，但React内部对它们的处理方式截然不同：

// 简化的React内部实现逻辑
function commitRootImpl() {
  // DOM 更新
  commitMutationEffects();
  
  // 调用 useLayoutEffect
  commitLayoutEffects();
  
  // 标记为渲染完成
  root.current = finishedWork;
  
  // 异步调度 useEffect
  scheduleCallback(NormalPriority, () => {
    flushPassiveEffects();
    return null;
  });
}

useLayoutEffect 的使用场景

防止视觉闪烁

当状态变化会导致DOM元素位置或尺寸发生变化时，如果使用useEffect，可能会出现"闪烁"问题——用户先看到初始状态，然后才看到更新后的状态。

function App(){
  const [content,setContent] = useState('六百六十六');
  const ref = useRef();
  
  useEffect(()=>{
    setContent('曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：'我爱你'。如果非要给这份爱加上一个期限，我希望是一万年。');
    ref.current.style.height='200px';
  },[])
  
  return (
    <div ref={ref} style={{height: '50px',background : 'yellowgreen'}}>{content}</div>
  )
}

让我们来看看刷新页面时的闪烁效果，不要眨眼睛哦:

output.gif

而使用useLayoutEffect，就能避免闪烁:

function App(){
  const [content,setContent] = useState('六百六十六');
  const ref = useRef();
  
  useLayoutEffect(()=>{
    // 阻塞渲染 同步的感觉
    setContent('曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：'我爱你'。如果非要给这份爱加上一个期限，我希望是一万年。');
    ref.current.style.height='200px';
  },[])
  
  return (
    <div ref={ref} style={{height: '50px',background : 'yellowgreen'}}>{content}</div>
  )
}

与需要直接操作DOM的第三方库集成

当我们需要集成像D3.js、ECharts、Three.js这类需要直接操作DOM的第三方库时，useLayoutEffect特别有用。这些库通常需要在DOM元素创建后立即操作它们，如果在useEffect中初始化，可能会出现闪烁或渲染不完整的问题。

function D3Chart() {
  const chartRef = useRef();
  
  useLayoutEffect(() => {
    // 在浏览器绘制前初始化图表，避免闪烁
    if (chartRef.current) {
      const svg = d3.select(chartRef.current)
        .append('svg')
        .attr('width', 500)
        .attr('height', 300);
        
      // 绘制图表内容
      svg.append('circle')
        .attr('cx', 250)
        .attr('cy', 150)
        .attr('r', 100)
        .style('fill', 'blue');
    }
    
    return () => {
      // 清理函数，防止内存泄漏
      if (chartRef.current) {
        d3.select(chartRef.current).selectAll('*').remove();
      }
    };
  }, []);
  
  return <div ref={chartRef}></div>;
}

使用useLayoutEffect确保：

  • 第三方库代码在DOM元素完全就绪后立即执行
  • 用户不会看到不完整或未初始化的图表
  • 图表的初始化和首次渲染被视为一个原子操作

"同步"拿到响应式之后元素的样式

function Modal(){
  const ref = useRef();
  useLayoutEffect(()=>{
    const height = ref.current.offsetHeight;  // 同步获取元素高度
    ref.current.style.marginTop = `${(window.innerHeight - height) / 2}px`  // 立即应用新样式
  },[]);

  return (
    <div ref={ref} style={{
      position: 'absolute',
      width: '200px',
      height: '200px',
      background: 'red',
      left: '50%',
      transform: 'translateX(-50%)'
    
    }}>我是王子</div>
  )
}

这个组件实现了一个居中显示的红色模态框：

  • 使用useRef创建对DOM元素的引用
  • 使用useLayoutEffect在DOM更新后但浏览器绘制前同步获取元素高度
  • 计算并应用marginTop值使元素垂直居中
  • 使用CSS属性left: 50%和transform: translateX(-50%)实现水平居中

让我们来看看结果:

image.png

总结

所以，useLayoutEffect到底是个什么神奇生物？它就像是React世界里的"闪现技能"，在浏览器绘制前迅速出手，解决那些可能导致用户体验不佳的视觉问题。它与useEffect的主要区别在于执行时机和阻塞特性，这使得它在特定场景下格外有用：

  1. 防止视觉闪烁 - 当你不希望用户看到中间状态时
  2. 需要同步获取DOM测量结果 - 当你需要在用户看到页面前调整元素位置时
  3. 与需要直接操作DOM的第三方库集成时

记住，useLayoutEffect虽然强大，但它会阻塞浏览器绘制，所以请明智使用。就像辣椒，用得恰到好处可以提升体验，用得太多就会"辣眼睛"了！

小贴士

  1. 默认选择useEffect - 除非你确实遇到了视觉闪烁问题，否则坚持使用不阻塞的useEffect。这就像选择交通工具，平常用公交车(useEffect)就好，只有赶时间才打车(useLayoutEffect)。

  2. 性能调试 - 如果你的应用中使用了大量useLayoutEffect并且感觉性能下降，可以临时将它们换成useEffect看看区别。如果没有视觉问题，就坚持使用useEffect。

  3. 记忆口诀 - "Layout先于Paint，Effect后于Paint"。这是面试时能救命的一句话，简单又精准！

  4. 开发者工具探索 - 试着在开发者工具中给useLayoutEffect和useEffect分别打上断点，观察它们的执行时机，这比读十篇文章还有效（当然，本文除外😉）。

最后，如果面试官再问你useLayoutEffect和useEffect的区别，不要只说出"一个同步一个异步"这种浅层回答了。大声告诉他："useLayoutEffect是浏览器绘制前的最后一道关卡，是修复闪烁问题的秘密武器！"然后优雅地抿一口咖啡，等待Offer砸来。

avatar
文章
阅读
粉丝