FlatList vs map react-native

Posted 2023-02-22

【中文标题】FlatList 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，反之亦然？

【问题讨论】：

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

【参考方案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
/>