为什么React.memo自定义浅比较在购物车Flatlist列表项中不生效？

问题原因&解决方案 #

1. 自定义比较函数取值错误 #

你当前的CartRowRender仅接收item这一个prop，所有商品属性都挂载在item对象下，你之前的比较函数直接从props根路径取quantityPrice，永远只能拿到undefined，比较逻辑完全失效。
正确的比较函数写法如下：

function checkEqualProps(prevProps, nextProps) {
  // 引用相同直接判定相等，无需深层比较
  if (prevProps.item === nextProps.item) return true
  // 逐一比较组件渲染依赖的所有属性
  return (
    prevProps.item.id === nextProps.item.id &&
    prevProps.item.subDataId === nextProps.item.subDataId &&
    prevProps.item.name === nextProps.item.name &&
    prevProps.item.quantity === nextProps.item.quantity &&
    prevProps.item.price === nextProps.item.price &&
    prevProps.item.quantityPrice === nextProps.item.quantityPrice
  )
}

2. 检查FlatList的renderItem写法 #

如果你的FlatList的renderItem是用inline匿名函数写的，每次父组件渲染都会生成新的函数引用，触发所有行组件重渲染。需要用useCallback包裹renderItem逻辑：

// 父组件中
const renderCartRow = useCallback(({item}) => {
  return <CartRowRender item={item} />
}, [])

// FlatList配置
<FlatList
  data={cartList}
  renderItem={renderCartRow}
  keyExtractor={item => `${item.id}-${item.subDataId}`} // 必须返回唯一稳定的key，不要用索引
/>

3. 检查子组件缓存逻辑 #

如果上述修改完成后CartIncrementor还是会重渲染，你需要给CartIncrementor也加上memo缓存，同时保证传给它的回调函数（如果有的话）是用useCallback包裹的稳定引用。

内容的提问来源于stack exchange，提问作者Ayush Kumar