Y a-t-il une différence entre key={i} et key={`foo-${i}`} ?

Question

Je suis en train de lire un livre avancé sur React intitulé React Cookbook . Pour une raison quelconque, l'auteur utilise un key avec un préfixe, comme ceci :

<div>
    {state.items.map((s, i) => (
        <div key={`square-${i}`}>
            {s}
        </div>
    ))}
</div>

Je continue à voir key construit de cette façon et cela me surprend toujours, surtout de la part d'un auteur avancé. Pour autant que je sache, il n'y a aucune différence entre ceci et juste key={i} .

Quand j'ai commencé avec React, des développeurs moins avancés m'ont dit que c'était utile quand on imbrique des listes, comme ceci :

<div>
    {state.items.map((s, i) => (
        <div key={`square-${i}`}>
            {s.map(f, j) => (
                <div key={`foo-${j}`}>
                    {f}
                </div>
            )}
        </div>
    ))}
</div>

Mais, cela est également inutile, puisque l'unicité de la clé est scopée, n'est-ce pas ? Donc les clés à différents niveaux ou différentes listes n'ont pas besoin d'être uniques.

Peut-être qu'il y aurait un peu de Ça n'aurait pas de sens de faire ça si ma liste était composée de deux ou plusieurs types de choses, comme ça :

<div key={`${item.type}-${i}`}>

Mais à part cela, pourquoi quelqu'un utiliserait-il une clé basée sur l'indice pour autre chose que l'indice ?

Answer 1

Utilisation de foo-${i} au lieu de i est redondant et se comporte de la même manière.

En effet, les index ne sont pas recommandés pour les props clés, qu'ils soient utilisés seuls ou dans des interpolations de chaînes.

Alors que le préfixe ne change pas, le index changera chaque fois que l'élément sera ajouté ou supprimé du tableau, et foo-0 n'est PAS égal à foo-1 . Dans ce cas, react rendra à nouveau l'élément parce que l'ancien key prop ne correspond pas au nouveau.

Answer 2

Je crois que les gens ont commencé à ajouter les préfixes parce qu'ils ont supposé à tort que l'unicité fonctionnait dans l'arbre :

Les clés ont une portée au niveau des frères et sœurs. Vous pouvez avoir la même touche vers le haut ou le bas de l'arbre des composants, mais pas vers le côté. Attention cependant, ceci n'est pas directement lié à l'arbre DOM lui-même, mais à l'arbre des composants réactifs.

Un enfant réagissant de type tableau a un "parent", de sorte que les clés peuvent être répétées sur les "frères et sœurs" (techniquement, il ne s'agit pas de frères et sœurs puisqu'ils ont ce "parent tableau", qui est transparent dans l'arbre DOM).

Le code suivant est valide et ne déclenche aucun avertissement. Les react-dom Le code peut être trouvé ici.

    <parent key="unique">
      <sibling key="must" />
      <sibling key="be" />
      <sibling key="unique">
        <child key="unique" />
      </sibling>
    </parent>

  <div>
    {['a', 'b', 'c', 'd', 'e'].map((letter, idx) => (
      <span key={idx}>{letter}</span>
    ))}
    {['a', 'b', 'c', 'd', 'e'].map((letter, idx) => (
      <span key={idx}>{letter}</span>
    ))}
  </div>

L'utilisation de l'approche de l'index en tant que clé est parfaitement acceptable et sûre si les données sont "statiques" et ne changeront jamais, sinon vous risquez d'avoir des problèmes de rendu et/ou une baisse de performance.

Answer 3

L'utilisation d'un index pour la clé n'est pas recommandée par la documentation officielle de react si l'ordre des données de votre liste est susceptible de changer. Je pense que l'auteur le sait et a créé un préfixe pour la clé afin qu'elle devienne une chaîne et non un simple numéro. Vérifiez la documentation pour la clé aquí