Question

我是反应原生的新手，对FlatList和VirtualizedList之间的区别感到困惑。

所以，

FlatList和VirtualizedList之间有什么区别？
我应该何时使用？

Answer 1

默认情况下，您可以使用FlatList渲染具有少量数据的列表视图。如果您的数据太大，或者您想在到达列表末尾时加载更多数据，或者需要更大的灵活性，则可以使用VirtualizedList

Answer 2

FlatList> 是用于呈现基本的平面列表的高性能界面。

另一方面，VirtualizedList> 是 <FlatList> 和 <SectionList> 组件的基本实现，它们是也有更好的记录。一般来说，VirtualizedList> 应该只在您需要比 FlatList 提供的更多灵活性时才真正使用，例如用于不可变数据而不是普通数组。

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

FlatList和VirtualizedList

2 个答案: