React Native FlatList：传递对象与对象引用，哪种性能更优？

首先要纠正你代码里的一个关键问题：FlatList的data属性应该传入原始数据数组，而非预先map好的组件列表。直接传组件数组会完全丧失FlatList的虚拟化渲染能力，导致所有列表项一次性渲染，不管哪种方案都会出现严重性能问题。正确的写法应该是利用renderItem属性来渲染子组件，比如：

修正后的两种方案代码 #

方案1：父组件传递完整对象 #

return (
  <FlatList
    data={this.props.items}
    keyExtractor={(item) => item.ID}
    renderItem={({ item }) => <ItemDisplay item={item} />}
  />
)

方案2：子组件通过ID从Redux获取对象 #

return (
  <FlatList
    data={this.props.items.map(item => item.ID)}
    keyExtractor={(id) => id}
    renderItem={({ item: itemID }) => <ItemDisplay itemID={itemID} />}
  />
)

接下来针对两种方案的性能差异，结合对象体积和列表项数量这两个核心因素分析：

1. 当对象体积小 + 列表项数量少（几十项以内） #

优先选择方案1，理由如下：

• 父组件仅需一次从Redux获取完整数组，避免了几十个子组件重复订阅同一数据的额外开销。
• 小体积对象的props传递成本可以忽略，代码逻辑更直观，维护成本低。
• 只要给ItemDisplay包裹React.memo，并确保Redux中的数组是不可变更新的，就能保证只有内容变化的子项才会重新渲染，性能足够稳定。

2. 当对象体积大 + 列表项数量少 #

优先选择方案2，但必须配合以下优化：

• 用Redux的createSelector创建一个memoized selector，专门根据ID获取单个对象，避免每个子组件都获取整个大数组：

  import { createSelector } from '@reduxjs/toolkit';
  
  const selectItems = state => state.items;
  const selectItemById = createSelector(
    [selectItems, (_, itemID) => itemID],
    (items, itemID) => items.find(item => item.ID === itemID)
  );
  

• 给ItemDisplay包裹React.memo，确保只有当对应ID的对象内容更新时，子组件才会重新渲染。
• 这种场景下，大对象的props传递会导致父组件重新渲染时，子组件的React.memo浅比较因对象引用变化失效，而方案2的ID传递更稳定，配合memoized selector能精准控制渲染时机。

3. 当对象体积小 + 列表项数量多（上百项及以上） #

优先选择方案1，同时做好以下优化：

• 给ItemDisplay包裹React.memo，并设置FlatList的keyExtractor为item的唯一ID。
• 确保Redux中的数组采用不可变更新（比如用Immer或手动返回新数组），这样只有内容变化的子项才会触发重新渲染，其他子项不受影响。
• 方案2的问题在于，上百个子组件重复订阅Redux数组，即使有memoized selector，总订阅和查找的开销会不断累积，远高于方案1的单次获取成本。

4. 当对象体积大 + 列表项数量多 #

优先选择方案2，且必须做深度优化：

• 用createSelector实现精准的单对象查找，避免子组件获取整个大数组。
• 给ItemDisplay包裹React.memo，同时确保FlatList的data仅包含ID，props传递成本极低。
• 这种场景下，方案1的大对象传递会导致父组件重新渲染时，大量子组件因对象引用变化触发不必要的渲染，而方案2通过ID传递+memoized selector，能将渲染范围精准控制在内容变化的子项上，性能优势明显。

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