Quelle est l'utilisation de la clé dans React

Dans React, la clé est utilisée pour identifier les composants. Elle peut identifier les éléments qui ont changé lorsque certains éléments du DOM sont ajoutés ou supprimés. C'est une sorte d'identification que vous pouvez décider de détruire ou de mettre à jour le composant en fonction du paramètre. clé. Si Si la clé est la même, si le composant change, seules les propriétés correspondantes du composant seront mises à jour. Si la clé est différente, le composant précédent sera détruit et restitué.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelle est l'utilisation de la clé dans React

En termes simples, React utilise la clé pour identifier les composants. Il s'agit d'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.

Les clés peuvent aider React à identifier quels éléments ont changé lorsque certains éléments du DOM sont ajoutés ou supprimés. Par conséquent, vous devez donner à chaque élément du tableau une certaine identité.

L'algorithme diff de React traite la clé comme un identifiant unique, puis compare la valeur du composant pour déterminer si elle doit être mise à jour. Par conséquent, s'il n'y a pas de clé, React ne saura pas comment mettre à jour le composant.

Vous pouvez toujours l'utiliser sans passer la clé car après que React ait détecté que le sous-composant n'a pas de clé, il utilisera par défaut l'index du tableau comme clé.

React décide de détruire, recréer ou mettre à jour le composant en fonction de la clé. Le principe est le suivant :

• Si la clé est la même, si le composant change, React ne mettra à jour que les propriétés correspondantes du composant. .

• la clé est différente, le composant détruira le composant précédent et restituera le composant entier.

Scénarios d'utilisation des clés

Dans le développement de projets, les scénarios d'utilisation les plus courants pour les attributs clés sont des sous-composants créés dynamiquement à partir de tableaux. Une valeur d'attribut clé unique doit être ajoutée à chaque sous-composant. Alors certaines personnes penseront naturellement que la valeur de la position d'index obtenue par la clé et le sous-élément rendu dynamiquement est très proche. N'est-il pas possible d'utiliser directement l'index pour attacher la valeur de la clé key={index ? }?

Par exemple :

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

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 d'un tableau ou l'insertion d'un nouvel élément en position médiane, alors les éléments de la vue seront tous restitués.

Par exemple :

Après avoir avancé l'élément avec index=2, la clé de l'élément changera également. Ensuite, la clé qui changera de cette manière n'a aucun sens d'existence, puisqu'elle est la même qu'un ". Carte d'identité" Si elle existe, il n'y a aucune possibilité de perte. 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é.

Apprentissage recommandé : "Tutoriel vidéo React"

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!