react-native - FlatList 和 VirtualizedList 的区别

Question

我是 React Native 的新手，对 FlatList 之间的区别感到困惑和 VirtualizedList .

所以，

FlatList有什么区别和 VirtualizedList ?

我应该什么时候使用每个？

Answer 1

< FlatList > 是一个用于渲染基本、平面列表的高性能接口(interface)。
另一方面，< VirtualizedList > 是 < 的基本实现FlatList > 和 < 栏目列表 > 组件，这些组件也有更好的文档记录。一般来说，< VirtualizedList > 应该只在您需要比 FlatList 提供的更多灵活性时才真正使用，例如用于不可变数据而不是普通数组。
平面列表示例:

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

VirtualizedList 示例:

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <VirtualizedList
        data={DATA}
        initialNumToRender={4}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.key}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  );
}

更多信息:
https://reactnative.dev/docs/virtualizedlist
https://reactnative.dev/docs/flatlist