优化Mini React：避免状态未变更时的重复渲染

优化Mini React：避免状态未变更时的重复渲染

在构建Mini React时，我们发现一个常见的性能问题：即使状态值未发生改变，组件也会进行不必要的重复渲染。本文将深入分析问题原因并实现优化方案。

问题现象分析

以下面代码为例：

function Foo() {

  console.log('fooo') // 每次点击都会打印

  const [bar, setBar] = React.useState('bar')

  

  function handleClick() {

    setBar('bar') // 设置相同的值

  }


  return (

    <div>

      {bar}

      <button onClick={handleClick}>clickbutton>

    div>

  );

}

当点击按钮时，虽然状态值bar没有实际变化，但每次点击都会触发组件重新渲染（控制台持续输出"fooo"）。这在性能敏感场景下会造成资源浪费。

优化原理与实现

React的核心优化策略之一是：当状态值未改变时，跳过渲染流程。我们在useState的setState函数中加入值比较逻辑：

function useState(initial) {

  // ... 状态初始化逻辑

  

  const setState = (action) => {

    // 计算期望的新状态

    const eagerState = typeof action === 'function' 

      ? action(stateHook.state) 

      : action;

    

    // 关键优化：状态值未改变时提前返回

    if (Object.is(eagerState, stateHook.state)) {

      return;

    }

    

    // 状态更新及重新渲染逻辑

    stateHook.state = eagerState;

    scheduleUpdate();

  };


  return [stateHook.state, setState];

}

优化关键点解析

0. 提前计算状态值：
   • 处理函数式更新：action(currentState)
   • 处理直接赋值：action
1. 精准状态比较：
   • 使用Object.is()代替===运算符
   • 正确处理特殊值：NaN、+0/-0等边界情况
   • 性能考虑：先比较再更新，避免不必要的渲染流程
2. 渲染流程优化：
   • 状态未变更时直接return，阻断后续更新
   • 状态变更时才触发重新渲染调度