L'importance des clés
Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 36 sur 42.
Chaque élément retourné par map a besoin d'une key, une étiquette stable et unique pour cet élément :
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}Pourquoi ? Lorsque le tableau change, React compare la nouvelle liste avec l'ancienne. Les clés lui indiquent quel élément est lequel, de sorte qu'il déplace les éléments au lieu de les reconstruire, conservant ainsi l'état, le focus et les animations intacts.
Meilleure `key` : un vrai id provenant de vos données. Acceptable : toute valeur unique et stable par élément (comme nos noms de fruits). Dernier recours : l'index du tableau. Cela rompt la réorganisation, car la position n'est pas une identité.
Essayez vous-même
Cette leçon ne comprend pas de défi de code.
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Les fondamentaux
1Découvrez React
Qu'est-ce que React ?Votre premier composantRègle du parent uniqueJSX n'est pas de l'HTMLRécapitulatif : Découvrez React4Props
Que sont les props ?Passer des propsDeux propsMême composant, nouvelles donnéesLa prop ChildrenRécapitulatif : Props7Conditions et Listes
Rendu ternaireAfficher avec &&Afficher une listeL'importance des clésFiltrer, puis mapperRécapitulatif : Conditions et Listes