React
Comment et pourquoi utiliser les clés dans React
Recherche…
Introduction
Chaque fois que vous restituez une liste de composants React, chaque composant doit avoir un attribut de key . La clé peut avoir n'importe quelle valeur, mais elle doit être unique pour cette liste.
Lorsque React doit effectuer des modifications sur une liste d'éléments, React réitère les deux listes d'enfants en même temps et génère une mutation chaque fois qu'il y a une différence. S'il n'y a pas de clés pour les enfants, React analyse chaque enfant. Sinon, React compare les clés pour savoir lesquelles ont été ajoutées ou supprimées de la liste.
Remarques
Pour plus d'informations, visitez ce lien pour savoir comment utiliser les clés: https://facebook.github.io/react/docs/lists-and-keys.html
Et visitez ce lien pour savoir pourquoi il est recommandé d'utiliser des clés: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Exemple de base
Pour un composant React sans classe:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
Pour cet exemple, le composant ci-dessus résout:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>