javascript - FlatList 与 map react-native

Question

我最近开始使用 react-native 并遇到了 FlatList 组件。在使用 react 时，我总是将 map 与数组一起使用。

我正在使用 FlatList 但是当我想更改 FlatList 中项目的 flex-direction 时出现问题所以我恢复到使用 map。

下面是使用这两种方法的两个例子:

map

{
    this.state.images.map(image => {
       return (
          <UsersImage key={ image } source={{ uri: image }} />
        )
    })
}

平面列表

<FlatList
    data={ this.state.images }
    renderItem={({item}) => {
        return (
            <UsersImage source={{ uri: item }} />
        )
    }}  
   keyExtractor={(item, index) => index}
/>

谁能解释为什么应该使用 FlatList 而不是 map 或相反？

Answer 1

FlatList 具有延迟加载(它只显示屏幕上的内容，因此如果您有一个巨大的列表，它可以提高性能)。顺便说一句，如果您需要更改弯曲方向，您可以将其设置为水平 - 只需传递 horizo​​ntal Prop (相当于说 horizo​​ntal={true})