FlatList 和 VirtualizedList 的区别

2024-05-13

我是 React Native 的新手,对两者之间的区别感到困惑FlatList and VirtualizedList.

So,

  1. 两者有什么区别FlatList and VirtualizedList ?
  2. 我应该什么时候使用每个?

The <FlatList> 是一个用于渲染基本、平面列表的高性能接口。

另一边,虚拟列表> 是 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>
  );
}

虚拟化列表示例:

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/virtualizedlist

https://reactnative.dev/docs/flatlist https://reactnative.dev/docs/flatlist

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

FlatList 和 VirtualizedList 的区别 的相关文章

随机推荐