React.memo性能优化：组件传参与areEqual比较函数最佳实践

一、两种Props传递方式的利弊 #

Option 1：拆分多个基础类型Props #

• 优势：基础类型的浅比较开销极低，React.memo默认的浅比较就能快速判断是否需要重渲染（无不稳定函数/对象props时）。
• 弊端：代码繁琐，当item字段增减时，必须同步修改组件调用代码，维护成本高；10+字段的写法冗余度高。

Option 2：传递整个item对象 #

• 优势：写法简洁，item字段变化时无需修改组件调用逻辑，维护性好。
• 弊端：item是引用类型，React.memo默认浅比较只会判断引用是否变化——如果父组件每次渲染时item是新创建的对象（即使内容不变），会触发不必要的重渲染，必须配合自定义areEqual函数做深比较。

二、两种areEqual方案的性能对比 #

Option 1：Lodash.isEqual + 剔除函数属性 #

const propsAreEqual = (prevProps, nextProps) => {
  const newPrevProps = {...prevProps, onPress: null};
  const newNextProps = {...nextProps, onPress: null};
  return _.isEqual(newPrevProps, newNextProps);
}

• 性能：远优于JSON.stringify方案。Lodash.isEqual是经过优化的深比较逻辑，会递归比较值而非序列化整个对象，处理大对象/嵌套对象时开销小很多。
• 注意点：如果onPress可能变化（比如父组件未用useCallback稳定引用），不能直接剔除，需保留并做引用比较（prevProps.onPress === nextProps.onPress），否则会导致onPress更新后组件不重渲染。

Option 2：JSON.stringify比较 #

const propsAreEqual = (prevProps, nextProps) => {
  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
}

• 性能：极差。序列化大对象会产生巨大字符串，字符串比对的开销远高于直接值比对；且JSON.stringify会忽略函数属性（onPress会被转为undefined或丢弃），若onPress引用变化但功能一致，会错误判断为props未变，反之如果对象属性顺序不同但值相同，也会错误判断为props变化。
• 仅适合极小且结构完全固定的对象，绝对不推荐用于FlatList大量数据场景。

三、最优组合方案 #

优先选择 Option 2（传递整个item） + Option 1的areEqual（Lodash.isEqual+合理处理函数props），理由：

1. 维护性与简洁性拉满，无需随item字段变化修改组件调用；
2. Lodash.isEqual的深比较性能足够应对大量数据场景，只要配合稳定的函数引用（父组件用useCallback包裹onPress），就能精准避免不必要的重渲染。

四、更优的进阶方案 #

如果追求极致性能，可放弃全量深比较，改为精准比较组件实际用到的字段：

const propsAreEqual = (prevProps, nextProps) => {
  const { item: pItem, onPress: pPress } = prevProps;
  const { item: nItem, onPress: nPress } = nextProps;
  
  // 只比较组件实际依赖的字段
  return pItem.id === nItem.id &&
         pItem.title === nItem.title &&
         pItem.count === nItem.count &&
         pPress === nPress; // 若onPress已用useCallback稳定，可省略此句
}

这种方式是性能最优的：仅做必要的浅比较，完全避免深递归的开销，同时精准控制重渲染触发条件。

另外，若项目中使用不可变数据模式（比如Immer、Redux不可变更新），item只有在内容变化时才会生成新引用，此时无需自定义areEqual，直接用React.memo的默认浅比较即可，性能更优。

补充：多Props传递的弊端总结 #

传递多个基础类型Props本身无性能问题，但维护成本高是核心弊端——字段增减需同步修改组件调用，代码冗余且易出错。除非组件依赖的字段极少且固定，否则优先传递整个对象。

内容的提问来源于stack exchange，提问作者control-panel