React Native FlatList 深克隆state解决全量重渲染是否为最优方案

现有实现的优劣 #

你当前靠「全量深克隆数据 + React.memo」的方案确实能跑通，但存在明显的性能冗余：

• 每次单条数据变更就对整个列表做深克隆，对于嵌套层级深、数据量较大的列表，会产生不必要的计算开销和内存占用，千条以上规模的列表甚至会出现明显的交互卡顿。
• 深克隆会让所有列表项的对象引用全部重新生成，本质是用额外的拷贝操作换数据一致性，完全没必要绕这么大弯从根本上修正状态更新逻辑。

问题的核心触发逻辑 #

全量重渲染的问题，来自两个可以从根源优化的点：

1. 状态更新违背不可变原则：原点赞逻辑中，仅对数组做了一层浅拷贝，随后直接修改数组元素的对象属性——这种方式直接篡改了原state指向的对象内容，会导致React的引用追踪机制失效。
2. 自定义memo对比逻辑存在局限：仅对比liked字段的判断方式，会拦截其他数据字段变更带来的必要重渲染，逻辑鲁棒性不足。

无多余开销的最优实现 #

完全不需要引入lodash做全量深克隆，只要严格遵循不可变更新规则，从根源上保证未变更的列表项引用完全一致，就能实现「仅变更项重渲染」的效果：

1. 修正点赞函数的状态更新逻辑，只给被修改的列表项生成新的对象引用，其他项完全复用原有引用：
   替换原来的变异式更新：

   // 原变异写法：直接修改原对象
   setData(state => {
     let clonedState = [...state];
     let index = clonedState.findIndex(item => item.id === id);
     clonedState[index].liked = !clonedState[index].liked;
     return clonedState;
   });
   

   为非破坏式的不可变更新：

   setData(state =>
     state.map(item =>
       item.id === id
         ? {...item, liked: !item.liked} // 仅被修改的项生成新引用
         : item // 未变更项完全复用原引用，无任何修改
     )
   );
   

   这种写法只会生成一个新的数组，数组内除了被点击的项之外，其他元素的引用和之前完全一致，没有任何深拷贝开销。
2. 优化Item组件的memo对比逻辑，去掉冗余的字段对比：
   因为状态更新已经保证未变更的项引用完全一致，不需要逐字段对比内容，直接通过引用对比就能精准判断是否需要重渲染，同时保证其他字段变更时的更新能力：

   const areEqual = (prevProps, nextProps) => {
     // 同时对比item引用和稳定的onLike回调引用
     return prevProps.item === nextProps.item && prevProps.onLike === nextProps.onLike;
   }
   

3. 删除冗余的深克隆逻辑：
   移除之前写的_.cloneDeep全量克隆代码，直接把原生的data状态传给FlatList即可。

实际运行效果 #

调整完成后，点击任意列表项的点赞按钮，只有被点击的那一项会触发重渲染，其他列表项因为item引用完全没有变化，会被memo直接拦截跳过渲染，整体性能开销会远低于全量深克隆的方案。

内容的提问来源于stack exchange，提问作者hossein zare