Introduction à l'utilisation spécifique des clés dans React (exemple de code)

Cet article vous apporte une introduction à l'utilisation spécifique des clés dans React (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer.

Nous rencontrons souvent de tels avertissements lors du développement de programmes de réaction, puis nous pensons : Oh ! J'ai oublié d'ajouter une clé au sous-composant de la boucle~

Par commodité, parfois l'index de la boucle est utilisé comme clé sans réfléchir, mais est-ce vraiment bien ? Quelle valeur est le meilleur choix pour la clé ?

Afin de comprendre, cet article analysera la « clé » sous trois aspects :

1. Pourquoi utiliser la clé

2. Problèmes liés à l'utilisation de l'index comme clé

.

3. Choix correct de la clé

1. Pourquoi utiliser la clé

La documentation officielle de React décrit la clé comme ceci :

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 s'il doit être mis à jour. Par conséquent, s'il n'y a pas de clé, React ne saura pas comment mettre à jour le composant. .

Vous pouvez l'utiliser sans passer la clé car React détecte que le sous-composant n'a pas de clé et utilisera l'index du tableau comme clé par défaut.

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

• Si la clé est la même et que le composant change. , React ne mettra à jour que le composant correspondant aux propriétés modifiées. Si la

• key est différente, le composant détruira le composant précédent et restituera à nouveau le composant entier.

2. Problèmes liés à l'utilisation de l'index comme clé

2.1 Composants contrôlés

Composants d'affichage purs tels que la durée, ces composants sont des composants contrôlés, c'est à dire que leurs valeurs seront celles que nous leur donnerons.

Si le sous-composant n'est qu'un composant contrôlé et utilise l'index comme clé, il se peut qu'il n'y ait aucun problème en surface, mais en fait les performances seront grandement affectées. Par exemple, le code suivant :

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

Lorsque l'ordre de la source de données de l'élément change, le correspondant :

Les composants avec les clés 0, 1 et 2 ont tous changé, et les trois sous-composants ont changé. (Le rendu ici n'est pas une destruction, car la clé est toujours là)

Au lieu de cela, nous utilisons l'identifiant unique comme clé :

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

Selon le principe de mise à jour ci-dessus, la valeur et Les clés du sous-composant sont les deux. Aucun changement n'a eu lieu, seul l'ordre a changé, donc réagissez uniquement les a déplacés et ne les a pas restitués.

2.2 Composants non contrôlés

Les composants comme l'entrée qui peuvent modifier la valeur arbitrairement par l'utilisateur et qui ne sont pas contrôlés par nous peuvent causer des problèmes lors de l'utilisation de l'index comme clé. Voir l'exemple suivant :

Composant enfant :

  render() {
    return (
      <p>
        </p><p>值：{this.props.value}</p>
        <input>
      
    );
  }
}

Composant parent

{
this.state.data.map((element, index) => {
    return <child></child>
    })
}

Nous saisissons les valeurs correspondantes dans les deux premières zones de saisie :

Ajoutez ensuite un élément en tête :

Evidemment, ce résultat n'est pas conforme à nos attentes, analysons ce qui s'est passé :

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

Après le changement :

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

On constate que : les clés 0, 1, 2 n'ont pas changé, selon les règles , le composant ne sera pas déchargé, seules les propriétés modifiées seront mises à jour.

react ne diffère que les changements de valeur dans la balise p, mais la valeur dans la zone de saisie n'a pas changé, elle ne sera donc pas restituée, seule la valeur de la balise p est mise à jour.

Après avoir utilisé l'identifiant unique comme clé :

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

Après modification :

    
值：5
    

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

Il On constate clairement que les composants avec les clés 111, 222 et 333 n'ont en aucun cas changé. React ne les mettra pas à jour. Il insère simplement un nouveau sous-composant 555 et modifie les positions des autres composants.

3. Choisissez correctement la clé

3.1 Affichage pur

Si le composant est uniquement destiné à l'affichage et qu'aucun autre changement ne se produira, utilisez l'index Ou il n'y a aucun problème à utiliser une autre valeur différente comme clé, car aucune différence ne se produira et la clé ne sera pas utilisée.

3.2 Situations où il est recommandé d'utiliser l'index

Il n'y a aucun inconvénient à utiliser l'index comme clé dans n'importe quelle situation, comme la situation suivante :

Vous souhaitez afficher une liste en pages, chaque fois que vous cliquez sur Tourner la page sera restitué :

Utiliser un identifiant unique :

第一页
<ul>
    <li key="000">张三</li>
    <li key="111">李四</li>
    <li key="222">王五</li>
</ul>
第二页
<ul>
    <li key="333">张三三</li>
    <li key="444">李四四</li>
    <li key="555">王五五</li>
</ul>

Après avoir tourné la page, les clés et composants des trois enregistrements ont changé, donc les trois sous-composants seront déchargés et restitués.

Utiliser l'index :

第一页
<ul>
    <li key="0">张三</li>
    <li key="1">李四</li>
    <li key="2">王五</li>
</ul>
第二页
<ul>
    <li key="0">张三三</li>
    <li key="1">李四四</li>
    <li key="2">王五五</li>
</ul>

Après avoir tourné la page, la clé reste inchangée, la valeur du sous-composant change et le composant ne sera pas désinstallé, seulement mis à jour.

3.3 Les sous-composants peuvent avoir modifié/utiliser des composants non contrôlés

Dans la plupart des cas, il n'y aura aucun problème à utiliser un identifiant unique comme clé d'un sous-composant.

Cet identifiant doit être unique et stable, ce qui signifie que l'identifiant correspondant à cet enregistrement doit être unique et ne changera jamais.

Il n'est pas recommandé d'utiliser math.random ou d'autres bibliothèques tierces pour générer des valeurs uniques sous forme de clés.

Parce que lorsque les données changent, les clés des mêmes données peuvent également changer, entraînant ainsi un nouveau rendu, provoquant un gaspillage inutile de performances.

Si la source de données ne répond pas à nos besoins, nous pouvons ajouter manuellement un identifiant unique à la source de données avant le rendu au lieu de l'ajouter lors du rendu.

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!