如何避免数组生成的组件在数组变更但key未变时重渲染？该需求可行吗？

需求是否可以实现？ #

可以实现。React的Diff算法通过key标识组件身份：当数组从[1, 2]变更为[2, 3]时，key=2的Test组件实例会被React直接复用，不会触发卸载后重建的流程。只要该组件本身没有因props/state变化导致的重渲染，就能完全避免不必要的更新。

如何避免此类不必要的重渲染？ #

要彻底实现需求，需要结合两个核心优化点：

• 用React.memo包装Test组件
  普通函数组件在父组件重渲染时，即使自身props和key都没变化，也会跟着重渲染。用React.memo包裹后，React会对组件的props做浅比较，只有当props真正变化时才触发重渲染。

  示例代码：

  const Test = React.memo((props) => {
    return <div>Test 组件 {props.value}</div>;
  });
  

• 保持key的稳定与唯一
  像示例中那样使用数组元素作为key（需确保元素唯一），让React能精准识别需要复用的组件实例，避免因key不稳定导致的组件重建。

  父组件代码示例：

  // 初始数组状态
  <div className="app">
    {[1, 2].map((i) => {
      return <Test key={i} value={i} />;
    })}
  </div>
  
  // 数组变更后状态
  <div className="app">
    {[2, 3].map((i) => {
      return <Test key={i} value={i} />;
    })}
  </div>
  

通过以上操作，数组变更时key=2的Test组件既不会被重建，也不会因父组件重渲染触发无意义的更新。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture