FlatList vs map react-native

Question

J'ai récemment commencé à utiliser react-native et ont rencontré le composant FlatList. Lorsque j'utilise react, j'ai toujours utilisé map avec un tableau.

J'utilisais FlatList mais il y avait des problèmes lorsque je voulais changer le flex-direction des éléments du FlatList donc je suis revenu à l'utilisation de map.

Voici les deux exemples utilisant les deux méthodes:

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

Quelqu'un peut-il expliquer pourquoi on devrait utiliser FlatList sur map ou vice versa?

Answer 1

FlatList a un chargement paresseux (il ne montre que ce qui est à l'écran, il peut donc être plus performant si vous avez une énorme liste). BTW, vous pouvez le faire être horizontal si c'est pour cela que vous avez besoin de changer la direction du flex - passez simplement le prop horizontal (équivalent à dire horizontal={true})