FlatList vs map react-native

pet*_*gan 11 javascript ecmascript-6 reactjs react-native

我最近开始使用react-native并遇到过该FlatList组件.使用时react我总是使用map数组.

我正在使用,FlatList但是当我想要更改flex-direction项目时我遇到了问题,FlatList所以我恢复了使用map.

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

map

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

FlatList

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

任何人都可以解释为什么一个人应该使用FlatList,map反之亦然?

R u*_*c k 10

FlatList有延迟加载(它只显示屏幕上的内容,因此如果你有一个巨大的列表,它可以更高效).顺便说一下,你可以把它变成水平的,如果你需要改变弯曲方向 - 只需通过horizontal道具(相当于说horizontal={true})