React Native FlatList 数组状态新增元素时全量重渲染问题排查求助

问题根因 #

• 将RenderItem组件定义在App函数内部是导致全量重渲染的核心原因。每次data状态更新触发App重渲染时，RenderItem的引用都会被重新创建，本质上每次渲染生成的是完全不同的组件类型。
• React Diff 逻辑判定组件类型变化时，会直接销毁旧实例、重新渲染所有列表项，此时包裹的memo完全无法生效——memo仅在组件类型不变的前提下，才会通过props浅比较判断是否跳过渲染。
• 把RenderItem移到App函数外部后，组件引用固定，memo的比较逻辑可以正常运行：仅新增项会触发渲染，已有项的item属性无变化时会直接跳过渲染，问题自然解决。

额外优化建议 #

• 定义在App内部的renderItemHandler建议用useCallback包裹，避免每次App重渲染生成新的函数引用，减少FlatList属性变化带来的额外开销：

const renderItemHandler = useCallback(({ item }: { item: number }) => {
  return <RenderItem item={item} />
}, [])

• 后续如果给RenderItem传递对象、函数类型的props，需要保证props引用稳定，或者给memo传入第二个自定义比较函数，否则依然可能出现非预期的重渲染。

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