A quoi sert la clé de React ?

La fonction de key in React est de déterminer si l'élément est nouvellement créé ou déplacé dans l'algorithme de comparaison, réduisant ainsi les différences inutiles, c'est-à-dire d'améliorer l'efficacité de la comparaison entre pairs et d'éviter la réutilisation in situ. ; la clé est un identifiant utilisé par React pour savoir si un élément de la liste a été modifié, ajouté ou supprimé.

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

Quelle est l'utilisation de key dans React

Fonction

Comme Vue, React a également un algorithme de comparaison, et le rôle de l'attribut element key est de déterminer si l'élément est un élément nouvellement créé ou déplacé, ainsi réduire les différences inutiles

Dans l'algorithme de comparaison de React, React utilisera la clé de l'élément pour déterminer si l'élément est nouvellement créé ou déplacé, réduisant ainsi le rendu des éléments inutiles. De plus, React doit également juger la relation entre l'élément et l'état local sur la base de la clé. Pour le dire simplement, il s'agit d'améliorer l'efficacité de la comparaison entre pairs des diff et d'éviter les effets secondaires causés par la réutilisation in situ.

vue et React lui-même utilisent l'algorithme diff. Vue utilise une méthode de composant de mise à jour plus fine, c'est-à-dire lier les moniteurs à chaque attribut

React utilise une stratégie de mise à jour descendante, avec chaque petit changement Un tout nouveau vdom. sera généré pour diff. Si la clé n'est pas écrite, il arrivera qu'elle doive être mise à jour mais ne soit pas mise à jour. Qu'est-ce que la clé ? La clé est utilisée par React pour suivre quels éléments de la liste ont été modifiés et ajoutés. la marque auxiliaire a été supprimée. Au cours du processus de développement, nous devons nous assurer que la clé d'un élément est unique parmi ses éléments frères.

Si les données de la liste sont rendues et qu'une donnée est insérée après les données, la clé ne jouera pas un grand rôle, comme suit :

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

Les éléments précédents sont dans l'algorithme de comparaison puisque les éléments précédents sont exactement. de même, aucune opération de suppression et de création n'aura lieu. , lors de la dernière comparaison, il doit être inséré dans la nouvelle arborescence DOM Par conséquent, dans ce cas, cela ne signifie pas grand-chose que l'élément ait un attribut clé ou non

Jetons un coup d'œil à l'utilisation de la clé lors de l'insertion de données plus tôt. La différence entre ne pas utiliser la clé :

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

Lorsque vous avez la clé, réagissez en fonction des sous-éléments de l'arborescence d'origine et des sous-éléments de la dernière arborescence. sur l'attribut key. Dans le cas ci-dessus, il vous suffit d'insérer l'élément 000 en première position

Lorsqu'il n'y a pas de clé, toutes les balises li doivent être modifiées

De même, avoir une valeur de clé ne signifie pas de meilleures performances. . Si seul le contenu du texte a changé, ne pas écrire la clé entraînera des performances et une efficacité supérieures

Principalement, parce que ne pas écrire la clé signifie remplacer tout le contenu du texte, les nœuds ne changeront pas

Et écrire la clé implique d'ajouter et de supprimer. nœuds. Si l'ancienne clé n'existe plus, supprimez-la. La nouvelle clé n'existait pas auparavant, puis insérez-la, ce qui augmente la surcharge de performances

Résumé

Une bonne utilisation des attributs de clé est une étape très critique dans l'optimisation des performances. Les notes sont :

la clé doit être unique

N'utilisez pas de valeurs aléatoires (nombres aléatoires) pour la clé Au prochain rendu, un nombre sera régénéré)Évitez d'utiliser l'index comme clé

Le processus de réaction Le jugement clé est le suivant :

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!