Théorie

FlatList et SectionList sont des composants dans React Native utilisés pour rendre des listes de données. Les deux composants sont efficaces pour gérer de grandes listes et sont optimisés pour la performance. La différence clé réside dans la manière dont ils gèrent les données et leurs cas d'utilisation.

FlatList

Pourquoi utiliser FlatList

• Rendu de données dynamiques : Idéal pour rendre efficacement de grands ensembles de données dynamiques. Ne rend que les éléments actuellement visibles à l'écran, garantissant ainsi les performances ;
• Efficacité de la mémoire : Efficace en mémoire car il ne charge pas l'ensemble du jeu de données en mémoire d'un coup ;
• Chargement paresseux : Implémente le chargement paresseux, ce qui signifie qu'il ne charge que les données nécessaires pour les éléments visibles.

Travailler avec FlatList

• data : Un tableau de données à rendre ;
• renderItem : Une fonction qui rend un élément individuel ;
• keyExtractor : Une fonction pour extraire une clé unique pour chaque élément ;
• onEndReached (optionnel) : Une fonction de rappel appelée lorsque la fin de la liste est atteinte ;
• onRefresh (optionnel) : Une fonction de rappel appelée lorsque l'utilisateur tire la liste vers le bas pour la rafraîchir.

Exemple

Résultat

SectionList

Pourquoi utiliser SectionList

• Données organisées : Utile lorsque les données se répartissent naturellement en sections (par exemple, catégories, dates). Chaque section peut avoir son propre en-tête ;
• Lisibilité améliorée : Fournit un moyen structuré et organisé de présenter les données, améliorant ainsi la lisibilité ;
• Sections dynamiques : Permet des mises à jour dynamiques à la fois des sections et des données, ce qui le rend adapté au contenu dynamique ;
• En-têtes personnalisables : Prend en charge les en-têtes de section personnalisés via la prop renderSectionHeader.

Travailler avec SectionList

• sections : Un tableau de sections, où chaque section a un tableau de données et des fonctions optionnelles renderItem et renderSectionHeader ;
• renderItem : Une fonction qui rend un élément individuel ;
• renderSectionHeader : Une fonction qui rend l'en-tête de la section ;
• keyExtractor : Une fonction pour extraire une clé unique pour chaque élément ;
• onEndReached (optionnel) : Une fonction de rappel qui est appelée lorsque la fin de la liste est atteinte ;
• onRefresh (optionnel) : Une fonction de rappel qui est appelée lorsque l'utilisateur tire la liste vers le bas pour la rafraîchir.

Exemple

Résultat

En Pratique