Quel est le rôle de la valeur clé dans React et quelle est son utilisation ? (avec code)

Ce que cet article vous apporte concerne le rôle des valeurs clés dans React et quelle est l'utilisation des valeurs clés ? (Le code est ci-joint), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Vous rencontrerez toujours un tel gouffre dans les projets React

Ceci est un avertissement indiquant que le parcours des éléments enfants dans un tableau nécessite Il existe une valeur de clé unique, mais quelle est exactement la clé et quel rôle joue-t-elle dans le code ?

Aperçu des clés

L'attribut clé dans React est un attribut spécial et son apparence n'est pas destinée aux développeurs (par exemple, après avoir défini la clé d'un composant, elle ne peut toujours pas être obtenue. La clé valeur de ce composant) est utilisé par React lui-même.
Pour faire simple, React utilise une clé pour identifier les composants, qui est un identifiant d'identité, tout comme notre carte d'identité est utilisée pour identifier une personne. Chaque clé correspond à un composant. React considère que la même clé est le même composant, donc les composants suivants correspondant à la même clé ne seront pas créés.

Scénarios d'utilisation des clés

Dans le développement de projets, l'attribut clé est le plus souvent utilisé dans les sous-composants créés dynamiquement à partir de tableaux. Il est nécessaire d'ajouter une valeur d'attribut clé unique à chaque sous-composant. Certaines personnes penseront naturellement que la valeur de key est très proche de la position d'index obtenue par le sous-élément rendu dynamiquement. Ne pouvons-nous pas utiliser directement index pour attacher la valeur de key={index} ?

例如：
{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

Après l'avoir essayé, vous constaterez que l'erreur a disparu et que le rendu ne pose aucun problème, n'est-ce pas normal ? ! Cependant, il est fortement déconseillé d’utiliser l’index de tableau comme clé.
Si la mise à jour des données est simplement une réorganisation du tableau ou l'insertion d'un nouvel élément dans sa position médiane, alors les éléments de la vue seront restitués.

Par exemple :
Après que l'élément avec index=2 soit avancé, la clé de l'élément changera également. Ensuite, la clé qui changera de cette manière n'a aucune signification puisqu'elle l'est. utilisée comme « carte d'identité » existe, il n'y a donc pas de place à l'erreur. Bien sûr, lorsque vous utilisez des valeurs clés pour créer des sous-composants, si le contenu du tableau est uniquement destiné à un affichage pur et n'implique pas de changements dynamiques dans le tableau, vous pouvez en fait utiliser l'index comme clé.

La valeur de la clé doit être unique et stable

Après avoir traité plusieurs fois la valeur de la clé, je pense que la valeur de la clé est similaire à l'identifiant de la clé primaire dans la base de données, elle est unique et unique .

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

Notez que dans l'exemple ci-dessus, dans les données rendues dynamiquement, la clé est déterminée par l'ID des données. Cependant, les identifiants de Li Si et Wang Wu sont les mêmes, ce qui conduit à. la même clé. Le résultat final du rendu est Zhang San. Comme Li Si et Wang Wu, ils n'ont pas été montrés. La raison principale est que React pense que John Four et Wang Five sont le même composant basé sur la clé (les valeurs clés de John Four et Wang Five sont les mêmes), ce qui entraîne le rendu du premier et des suivants. sera rejeté.

De cette façon, avec l'attribut key, une relation correspondante peut être établie avec le composant qui décidera s'il faut détruire, recréer ou mettre à jour le composant en fonction de la clé

De plus, la Clé doit également être garantie La stabilité de la valeur, par exemple :

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

D'autant plus que comme le montre l'exemple ci-dessus, la valeur de la clé est déterminée par génération aléatoire de Math.random() , ce qui fait que la destruction et la recréation de chaque élément entraîne une certaine surcharge de performances et peut en outre entraîner des problèmes inattendus ;

Par conséquent, la valeur de Key doit garantir son unicité et sa stabilité

Recommandations associées :

Comment lire la valeur de la clé dans redis Résultats dans

Explication détaillée de l'utilisation de la navigation React Native React Native

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!