Maison > interface Web > js tutoriel > Pourquoi les clés uniques sont-elles essentielles pour un rendu efficace des enfants du tableau dans React ?

Pourquoi les clés uniques sont-elles essentielles pour un rendu efficace des enfants du tableau dans React ?

DDD
Libérer: 2024-12-19 16:22:10
original
1014 Les gens l'ont consulté

Why are Unique Keys Essential for Efficient Rendering of Array Children in React?

Comprendre les clés uniques pour les enfants d'un tableau dans React.js

Dans React.js, chaque élément enfant d'un tableau doit avoir un accessoire de clé unique. Cette clé aide React à identifier les éléments et à suivre efficacement leurs modifications.

Lors de la création de composants dynamiques qui acceptent des sources de données et restituent des tableaux, il est essentiel d'attribuer des clés uniques à chaque enfant. Si vous ne le faites pas, un message d'erreur apparaîtra indiquant que chaque enfant a besoin d'un accessoire clé unique.

Étude de cas et solution

Considérez le composant React suivant qui génère une table triable :

<table key="thead">
  <TableHeader columns={columnNames} />
  <tbody key="tbody">
    { rows }
  </tbody>
</table>
Copier après la connexion

Chaque ligne dans les lignes est construite à l'aide d'un composant avec une clé :

<TableRowItem key={item.id} data={item} columns={columnNames} />
Copier après la connexion

L'erreur de clé se produit car chaque Il manque une clé dans l'élément TableRowItem :

<TableRowItem key={item.id} data={item} columns={columnNames}>
  {this.props.columns.map(function(c) {
    // Add a key here: key={item.id}
    return <td {this.props.data[c]}></td>;
  }, this);}
</TableRowItem>
Copier après la connexion

Importance des clés uniques pour les enfants

Les clés uniques sont cruciales pour la stratégie d'optimisation de React. En fournissant une clé pour chaque enfant, React peut suivre les changements plus efficacement. Sans clés, React traitera chaque modification comme si elle affectait l'ensemble du tableau, ce qui entraînerait un nouveau rendu inutile de la liste entière, ce qui peut avoir un impact sur les performances.

Dans l'exemple fourni précédemment, chaque ligne doit avoir une clé. , ainsi que chaque élément dans chaque ligne. Voici le code corrigé :

<TableRowItem key={item.id} data={item} columns={columnNames}>
  {this.props.columns.map(function(c) {
    // Add a key to each <td> element: key={item.id}
    return <td key={item.id}>{this.props.data[c]}</td>;
  }, this);}
</TableRowItem>
Copier après la connexion

En attribuant des clés uniques aux lignes et aux cellules individuelles, React peut gérer les mises à jour plus efficacement, garantissant des performances optimales du composant table.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal