FlatList vs map react-native答案

【问题标题】：FlatList vs map react-nativeFlatList vs map react-native
【发布时间】：2018-06-14 16:23:46
【问题描述】：

我最近开始使用react-native 并遇到了FlatList 组件。使用react 时，我一直使用map 和数组。

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

以下是使用这两种方法的两个示例：

map

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

FlatList

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

谁能解释为什么应该使用FlatList 而不是map，反之亦然？

【问题讨论】：

嗨，彼得，如果您觉得我的回答有帮助，您会考虑接受吗？

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

FlatList 具有延迟加载功能（它只显示屏幕上的内容，因此如果您有一个巨大的列表，它可以提高性能）。顺便说一句，如果您需要更改 flex 方向，您可以让它水平 - 只需传递 horizontal 道具（相当于说 horizontal={true}）

【讨论】：

如果你有一个简单的列表（大约 10 个项目，没有滚动，没有什么太复杂的加载），使用 FlatList 在性能方面是否仍然更好？试图弄清楚什么时候需要。
我认为这不会带来任何明显的好处，因为 10 个项目非常少，而且听起来你无论如何都在一次显示它们。因此，无论您使用FlatList 还是其他东西，它们都会被渲染。在那种情况下，我绝对不会考虑使用FlatList。但是一般来说，您实际上可以使用FlatList 和map 使用此处facebook.github.io/react-native/docs/performance.html 中的一些想法直接比较，看看它是否对您的情况有帮助。

【解决方案2】：

无需弯曲您的视图标签。只需添加水平

<FlatList
    horizontal
    data={data}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
/>

【讨论】：