RETOUR
Transformer un tableau en une liste d'éléments avec React est assez simple, tout ce que vous avez à faire est de mapper ce tableau et de renvoyer l'élément approprié pour chaque élément du tableau.
Il y a encore une chose dont vous devez vous souvenir, et c'est la Clé React chaque élément de la liste rendue doit l'avoir. Ce concept est l'une des premières choses que tout développeur frontal apprend à connaître React au début de leur parcours. Nous allons maintenant nous pencher un peu plus sur les raisons de cette situation et sur les moments où il est possible de prendre des raccourcis.
La réponse la plus simple serait "d'optimiser les re-renders", mais la réponse la plus complète doit au moins mentionner le concept de React Rapprochement. Il s'agit de déterminer comment mettre à jour l'interface utilisateur de la manière la plus efficace possible. Pour y parvenir rapidement, React doit décider quelles parties de l'arbre des éléments doivent être mises à jour et lesquelles ne doivent pas l'être. Le problème est qu'il peut y avoir beaucoup d'éléments dans le DOM et que comparer chacun d'entre eux pour décider lequel doit être mis à jour est assez coûteux. Pour optimiser ce processus, React met en œuvre l'algorithme diffing qui repose sur deux hypothèses :
Sur cette base, nous pouvons conclure que chaque Clé React doivent également être uniques (dans la liste des éléments, pas globalement) et stables (ils ne doivent pas changer). Mais que se passe-t-il lorsqu'ils ne le sont pas ?
Comme nous l'avons déjà mentionné, Clés React doit être stable et unique. Le moyen le plus simple d'y parvenir est d'utiliser un identifiant unique (provenant par exemple d'une base de données) et de le transmettre à chaque élément lors du mappage d'un tableau, ce qui est facile. Mais qu'en est-il des situations où nous n'avons pas d'ID, de nom ou d'autres identifiants uniques à passer à chaque élément ? Eh bien, si nous ne passons rien comme clé, React prendra par défaut l'index du tableau courant (puisqu'il est unique dans cette liste) pour le gérer à notre place, mais il nous donnera aussi un joli message d'erreur dans la console :
Pourquoi en est-il ainsi ? La réponse est que l'index du tableau n'est pas stable. Si l'ordre des éléments change, chacune des clés changera et nous aurons un problème. Si l'ordre des éléments change, chacune des clés changera et nous aurons un problème. React Dans une situation où l'ordre d'une liste d'éléments a été modifié, il essaiera toujours de les comparer par les clés, ce qui signifie que chaque comparaison aboutira à la reconstruction d'un composant et que, par conséquent, la liste entière sera reconstruite à partir de zéro. En outre, nous pouvons rencontrer des problèmes inattendus, comme des mises à jour de l'état des composants pour des éléments tels que des entrées non contrôlées et d'autres problèmes magiques difficiles à déboguer.
Revenons à l'index du tableau. Si on l'utilise comme Clé React peut être si problématique, pourquoi React l'utilisera par défaut ? Existe-t-il un cas d'utilisation pour lequel il est acceptable de le faire ? La réponse est oui, le cas d'utilisation est celui des listes statiques. Si vous êtes sûr que la liste que vous rendez ne changera jamais d'ordre, vous pouvez utiliser l'index de tableau, mais rappelez-vous que si vous avez des identifiants uniques, il est préférable de les utiliser à la place. Vous pouvez également remarquer que le fait de passer des index en tant que clés rendra la fonction React disparaît, tout en déclenchant simultanément l'affichage d'une erreur ou d'un avertissement par certains linters externes. Cela est dû au fait que l'utilisation explicite d'index comme clés est considérée comme une mauvaise pratique et que certains linters peuvent la traiter comme une erreur, tandis que React considère qu'il s'agit d'une situation où "les développeurs savent ce qu'ils font" - ne le faites donc pas à moins que vous ne sachiez vraiment ce que vous faites. Quelques exemples de cas où il est possible d'utiliser cette exception : un menu déroulant avec une liste statique de boutons ou l'affichage d'une liste d'éléments avec l'adresse de votre entreprise.
Supposons qu'aucune des options ci-dessus ne soit envisageable. Par exemple, nous devons afficher une liste d'éléments basée sur un tableau de chaînes de caractères qui peut être dupliqué, mais aussi réordonné. Dans ce cas, nous ne pouvons utiliser aucune des chaînes parce qu'elles ne sont pas uniques (ce qui peut également provoquer des bogues magiques), et l'index du tableau n'est pas suffisant parce que nous allons changer l'ordre des éléments. La dernière chose sur laquelle nous pouvons compter dans ce genre de situation est l'utilisation d'identifiants externes. Rappelez-vous qu'ils doivent être stables, nous ne pouvons donc pas nous contenter de Math.random(). Il existe des paquets NPM que nous pouvons utiliser dans de tels cas, par exemple le paquet "uuid" de l'ensemble des données. Des outils de ce type peuvent nous aider à maintenir nos clés de liste stables et uniques, même lorsque nous ne pouvons pas trouver les identifiants appropriés dans notre ensemble de données. Nous devrions envisager d'utiliser d'abord l'ID de la base de données et l'index du tableau (si possible), afin de minimiser le nombre de paquets utilisés par nos projet.
En savoir plus :
Pourquoi vous devriez (probablement) utiliser Typescript
Comment ne pas tuer un projet avec de mauvaises pratiques de codage ?
French 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
Arabic 
Italian 
Japanese 
Korean 
Polish