Maintenant, je viens de vous montrer la vue de défilement et il est déjà temps de lâcher prise et de se débarrasser de
la vue de défilement, pourquoi? La vue de défilement
est excellente si vous avez une zone de défilement sur
votre écran, mais ce n'est pas si bien si vous avez une liste où vous ne savez pas combien de temps elle
sera ou qui pourrait être très longue.
Maintenant, si vous savez que vous avez du contenu, peut-être une liste de données, mais vous savez que ce ne
sont que 20 éléments, donc cela dépassera probablement les limites de mon écran mais ce ne sera jamais plus de 20
ou 15 éléments, alors vous
pouvez utiliser une vue de défilement mais si vous avez des listes très longues, une vue de défilement peut être très inefficace
car elle rend tous les éléments à l'avance, même ceux qui ne sont pas à l'écran.
Cela signifie que même les objectifs là-bas qui ne sont actuellement pas visibles sont entièrement rendus et lorsque vous
faites défiler une liste très longue avec beaucoup d'éléments ou si vous faites autre chose à l'écran, cela
peut vraiment ralentir votre application.
Si vous avez une liste avec des centaines ou des milliers d'éléments et que tous sont toujours affichés même
si vous ne les voyez pas, cela peut vraiment ralentir votre application.
Donc, pour accélérer cela, il existe un composant intégré à React Native qui gère de telles listes infinies ou
des listes potentiellement très longues de manière plus efficace et c'est le
composant FlatList que vous importez également à partir de React Native. FlatList remplace la vue de défilement pour ainsi dire, donc
ici nous pouvons simplement utiliser FlatList qui est un élément à fermeture automatique et FlatList a deux propriétés importantes
- la première propriété est la propriété data où vous pointez sur vos données d'entrée et cela devrait
pointer sur un tableau.
Alors ici, je pointe les objectifs du cours parce que ce sont les données que je veux sortir.
La deuxième propriété importante est l'élément de rendu, qui prend une fonction qui est appelée pour chaque élément de
vos données pour rendre un élément de liste.
Ceci est une fonction qui obtiendra des données sur cet élément,
donc je vais nommer les données de l'élément d'argument et ensuite elle doit renvoyer un composant,
alors ici je vais retourner la même vue que j'avais
avant, juste me débarrasser du manuel la logique de mappage, donc je vais toujours retourner cette vue.
Maintenant, vous n'avez plus besoin de définir une clé ici, mais je reviendrai sur la façon dont cela est saisi dans une seconde.
Alors maintenant, ici, nous obtenons les données de l'article et donc nous n'avons plus d'objectif ici.
Les données d'un élément sont un objet plus complexe, mais vous y trouverez une propriété d'élément.En plus de l'élément, vous avez également l'index, donc le
nombre, la
position de cet élément dans le tableau à partir de 0 et des séparateurs qui vous permettraient pour rendre les séparateurs
de manière dynamique entre les éléments de la liste, ce n'est pas quelque chose que nous ferons ici,
mais l'élément sera vos données, donc
un élément de vos données d'entrée et c'est donc l'un de nos objectifs.
et si nous le faisons et que nous le sauvegardons, apprenons maintenant React Native, peut-être ici sur l'iPhone pour
mélanger les choses et nous pouvons ajouter des choses ici et si j'en ajoute beaucoup et
que je ferme ensuite le clavier, je peux faire défiler mais vous '' Je verrai qu'il y a un avertissement.
Nous développons cela, nous voyons virtualiser la liste des clés manquantes pour les articles,
c'est donc un autre avertissement lié aux clés.
La raison en est que FlatList ajoute automatiquement des clés à vos éléments, mais uniquement si vos
données, vos données d'entrée ont une certaine forme et notre forme actuelle où nous avons simplement un tableau de chaînes n'est
pas prise en charge. La forme à laquelle
il s'attendrait est que vous n'avez pas d'objectifs qui ne sont que des chaînes mais que votre liste est une
liste d'objets où vous devez avoir une propriété de clé dans cet objet et ici nous allons réellement
créer une clé aléatoire maintenant avec Math . au hasard et ensuite je le convertis en une chaîne car ce devrait être
une chaîne
et bien sûr, ce n'est pas parfaitement unique, vous pourriez avoir le même nombre aléatoire deux fois mais
c'est assez bon pour cette démo ici et maintenant vous ne pouvez
plus avoir d'autres données ici, dans cet
objet, la clé est la seule propriété incontournable,
donc ici j'aurai une propriété value mais vous auriez pu nommer ce val
ou ce texte ou
ce que vous voulez, j'irai avec value
et c'est maintenant mon objectif entré.
Alors maintenant, notre tableau d'objectifs de cours ici est un tableau d'objets où chaque objet a une propriété clé et
une propriété de valeur et
maintenant si nous alimentons ce tableau d'objectifs de cours dans FlatList, FlatList est content car il attend une source de
données où vous avez un tableau de objets, où chaque objet a une propriété clé, puis tout ce que
vous voulez. Maintenant, pour sortir
nos données, il ne suffit plus d'accéder à itemData. élément parce que l'élément est maintenant un objet et non
plus seulement une chaîne, mais l'élément aura une clé et une propriété value maintenant parce que c'est ce que nous configurons là-bas et
je peux simplement accéder à la propriété value pour sortir le texte. Et maintenant, si nous enregistrons ceci et cela reconstruit
et donc maintenant si nous essayons à nouveau avec Learn React Native, fermez le clavier, vous voyez que nous n'obtenons plus d'avertissement et nous
pouvons toujours faire défiler cela bien sûr, nous n'obtenons aucune erreur ici non plus parce que
maintenant, nous avons cette propriété clé ici. Maintenant, si vous avez des données où vous n'avez
pas de propriété de clé et que vous ne voulez pas les transformer, disons que vous aviez à la place un ID qui provoquerait un avertissement
comme vous pouvez le
voir si je teste cela, nous obtenons l'avertissement ici , dans ce cas, vous pouvez également ajouter une autre propriété à
FlatList en plus des données et de l'élément de rendu, vous pouvez ajouter la propriété d'extracteur de clé qui prend une fonction qui indique
à FlatList comment extraire votre clé et par défaut, la logique est que j'examinerai à l'élément et recherchez une propriété de clé,
mais maintenant avec l'extracteur de clé, vous pouvez changer cela. L'extracteur de clé prend une fonction qui prend deux arguments - l'élément qu'il regarde et l'index de
cet élément et maintenant vous devez retourner une clé et par défaut, il chercherait l'élément. , c'est donc la logique
par défaut que vous n'avez pas besoin d'ajouter.
Maintenant, ici, je change la clé ou l'identifiant unique pour être sur un accessoire d'ID et donc, je vais changer cela là-bas dans l'extracteur de
clé pour obtenir l'ID sous forme de clé et maintenant avec cela, vous vous débarrassez également de l'avertissement
parce que vous informez React Native's FlatList comment obtenir une clé unique pour chaque élément de votre
liste.
Alors maintenant ici, si vous apprenez à nouveau React Native ici et que nous ajoutons cela, vous verrez que cela fonctionne, nous pouvons faire défiler cela
et nous n'avons également aucun avertissement. C'est donc FlatList et vous devriez utiliser FlatList pour des listes
très longues, pour des listes où vous ne savez pas combien de temps elles seront mais où elles sont potentiellement
très longues car cela vous donne une meilleure performance qu'une vue de défilement qui d'autre part est génial si
vous savez que vous ne disposez que d'une quantité limitée d'éléments qui dépasseront probablement les limites de votre écran
mais où vous n'aurez pas trop d'éléments redondants rendus en dehors de l'écran.