React.memo在FlatList子项上失效：滚动时大量列表项重复渲染

问题根源 #

你遇到的情况主要源于两个核心问题：

• key不稳定或重复：FlatList依赖key识别不同列表项，若使用索引（数据追加后索引会变化）或重复值作为key，组件会被频繁卸载再挂载，表现为重复渲染。
• React.Memo未生效：如果列表项接收的props包含对象、函数这类引用类型，父组件每次渲染时这些props会生成新引用，React.Memo默认的浅比较会判定props变化，触发重新渲染。

具体修复步骤 #

1. 给FlatList设置可靠的keyExtractor #

绝对不要用索引当key！必须使用每个item独有的、固定不变的标识（比如数据库中的id字段）：

<FlatList
  data={yourData}
  keyExtractor={(item) => item.id.toString()} // 用唯一id作为key，转字符串避免类型问题
  // 其他配置项
/>

2. 让React.Memo真正发挥作用 #

如果列表项组件接收了引用类型的props，需要做额外处理：

方法一：自定义props比较逻辑

给React.Memo传递第二个参数，手动判断props是否需要更新：

const ListItem = React.memo(({ item, onItemTap }) => {
  // 你的列表项渲染逻辑
}, (prevProps, nextProps) => {
  // 仅比较item的核心标识和函数引用
  return prevProps.item.id === nextProps.item.id && prevProps.onItemTap === nextProps.onItemTap;
});

方法二：用useCallback稳定函数引用

若父组件给列表项传递内联函数，每次渲染都会生成新函数，导致React.Memo失效。用useCallback包裹函数，保证引用稳定：

// 父组件中
const handleItemTap = useCallback((item) => {
  // 处理点击逻辑
}, []); // 依赖项为空，若逻辑需要依赖其他变量再按需添加

// 渲染FlatList时传递
<FlatList
  renderItem={({ item }) => <ListItem item={item} onItemTap={handleItemTap} />}
/>

3. 检查分页加载逻辑 #

确认每次从本地数据库获取20条数据时，是基于最后一条数据的id做分页查询，避免重复拉取相同数据。如果数据本身存在重复项，FlatList必然会出现重复渲染的情况。

内容的提问来源于stack exchange，提问作者Yogesh Tripathi