滚动时FlashList纯组件重复渲染问题求助

核心问题分析 #

FlashList的虚拟化复用机制和FlatList存在差异，当嵌套列表高度估算不准、key设置不规范或组件纯性不足时，容易出现滚动后内容重复渲染的问题。以下是针对性修复方案：

1. 严格规范嵌套列表的Key设置 #

每个嵌套子项必须使用全局唯一且稳定的ID作为key，绝对不能用循环index替代。你的数据里已经生成了${index}-${childIndex}格式的唯一ID，要确保在子列表的keyExtractor或组件key属性中正确使用：

// 子列表示例
<FlatList
  data={item.children}
  keyExtractor={(child) => child.id} // 必须用唯一ID，不能用childIndex
  renderItem={({ item }) => <ChildItem item={item} key={item.id} />}
/>

2. 修正estimatedItemSize的估值 #

你当前设置的estimatedItemSize={100}远小于包含嵌套子列表的父项实际高度，FlashList的高度估算错误会导致复用逻辑混乱。建议：

• 测量父项展开后的实际高度，设置更精准的估值（比如包含50个子项的父项高度可能在800左右）
• 若无法确定固定高度，可尝试开启experimentalAdjustForContentSizeChange属性：

<FlashList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  estimatedItemSize={800} // 调整为接近实际高度的值
  experimentalAdjustForContentSizeChange={true}
/>

3. 确保渲染组件的纯性 #

即使使用了纯组件，也要避免传递不稳定的props引用：

• 将嵌套子项的渲染逻辑抽离为独立的React.memo组件，并自定义props比较函数
• 不要在renderItem内部定义组件或临时函数，避免每次渲染生成新引用：

// 抽离的纯子组件示例
const ChildItem = React.memo(({ item }) => {
  return <Text style={styles.childText}>{item.name}</Text>;
}, (prevProps, nextProps) => {
  // 自定义比较：仅当item.id变化时才重渲染
  return prevProps.item.id === nextProps.item.id;
});

const ParentItem = React.memo(({ item }) => {
  return (
    <View style={styles.parentContainer}>
      {/* 父项内容 */}
      <FlatList
        data={item.children}
        keyExtractor={(child) => child.id}
        renderItem={({ item }) => <ChildItem item={item} />}
        scrollEnabled={false} // 禁止子列表独立滚动，避免嵌套滚动冲突
      />
    </View>
  );
});

const renderItem = ({ item }) => <ParentItem item={item} />;

4. 升级FlashList版本 #

旧版本的FlashList存在嵌套列表复用的已知bug，确保你使用的@shopify/flash-list是最新稳定版，执行升级命令：

npm install @shopify/flash-list@latest
# 或 yarn add @shopify/flash-list@latest

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