Pourquoi les clés uniques sont-elles essentielles pour un rendu efficace des enfants du tableau dans 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>

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

<TableRowItem key={item.id} data={item} columns={columnNames} />

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>

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>

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!