FlatList内部状态未随滚动重置：与文档描述不符的疑问咨询

文档原文引用 #

Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.

你的示例代码 #

const Item = ({title}: {title: string}) => {
  const [n, setN] = useState(0);

  return (
    <TouchableOpacity
      onPress={() => setN(prev => prev + 1)}
      style={[styles.item]}>
      <Text style={[styles.title]}>
        {title}-{n}
      </Text>
    </TouchableOpacity>
  );
};

export default function List() {
  const renderItem = ({item}: {item: any}) => {
    return <Item title={item.title} />;
  };

  return (
    <FlatList
      data={MockListData}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}

核心原因：FlatList的组件复用机制 #

FlatList为了优化性能，会维护一个组件缓存池——当列表项滚出可视窗口时，组件实例不会被立即销毁，而是被缓存起来。当对应的列表项再次滚回可视区域时，FlatList会直接复用这个已存在的组件实例，而非重新创建新的组件。这就导致组件内部的useState状态会被保留，不会被重置。

文档中的描述指的是极端场景：当列表项数量极大，滚出窗口的组件实例超出了缓存池的容量，FlatList才会销毁这些组件，此时内部状态才会丢失。而日常开发中，缓存池足够容纳滚出窗口的少量项，所以你看不到状态重置的现象。

相关注意事项与解决方案 #

• 推荐方案：将状态与数据绑定
  如果你希望列表项的状态和数据强关联，而非依赖组件实例的内部状态，应该把状态存储到FlatList的data数组中，或者使用外部状态管理工具。示例修改如下：

  const Item = ({ title, count, onPress }: { title: string; count: number; onPress: () => void }) => {
    return (
      <TouchableOpacity onPress={onPress} style={styles.item}>
        <Text style={styles.title}>{title}-{count}</Text>
      </TouchableOpacity>
    );
  };
  
  export default function List() {
    const [listData, setListData] = useState(MockListData);
  
    const handleItemPress = (itemId: string) => {
      setListData(prevData => 
        prevData.map(item => 
          item.id === itemId ? { ...item, count: (item.count || 0) + 1 } : item
        )
      );
    };
  
    const renderItem = ({ item }: { item: any }) => (
      <Item 
        title={item.title} 
        count={item.count || 0} 
        onPress={() => handleItemPress(item.id)} 
      />
    );
  
    return (
      <FlatList
        data={listData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    );
  }
  

• 强制重置状态（不推荐）
  若确实需要在项滚出可视区域时重置状态，可以通过FlatList的onViewableItemsChanged事件跟踪可视项，手动管理不可视项的状态。但这种方式会增加状态管理复杂度，仅适合特殊场景。
• 确保键的稳定性
  keyExtractor返回的键必须唯一且稳定，这是FlatList正确复用组件的前提。如果键频繁变化，FlatList会频繁销毁重建组件，可能导致状态意外丢失，这也是文档隐含的要求。

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