React大对象数组场景下如何优化渲染性能，避免全量组件重渲染

安全阿岳

2026-9-23

解决方案

拆分 Context 隔离状态与回调
将事件回调和全局数据拆分为两个独立 Context：事件回调用 useCallback 封装后单独存入 Context，由于回调依赖为空，引用永远保持稳定，所有消费该 Context 的组件不会因为回调变更触发重渲染。数据 Context 仅存储需要更新的结构化数据，避免把无关变量存入 Context 导致不必要的渲染。
严格遵循 Immutable 更新规则
你当前的分组数据结构已经满足范式化要求，更新数据时仅修改变更节点的引用，其余层级引用保持不变：
```
// 仅更新目标item的引用，其余数据引用完全不变
setData(prev => {
  const targetGroup = prev[targetKey];
  return {
    ...prev,
    [targetKey]: [
      {...targetGroup[0], title: 'asd'},
      ...targetGroup.slice(1)
    ]
  }
})
```
如果嫌手动写 immutable 逻辑繁琐，可以引入 immer 库，直接修改原对象的写法就能自动生成符合 immutable 规则的新数据。

子组件用浅比较记忆化
列表子组件用 React.memo 包裹，自定义比较函数仅校验传入的单条数据引用是否变化，不需要深比较：

const ListItem = React.memo(({ itemData }) => {
  const handleItemEvent = useContext(ItemEventContext);
  // 组件内部逻辑、私有状态变更仅触发当前组件重渲染
  return <div onClick={() => handleItemEvent(itemData.id, 'update')}>{itemData.title}</div>
}, (prevProps, nextProps) => prevProps.itemData === nextProps.itemData);