Au moment de donner des clés uniques pour les composants, est-il acceptable d'utiliser les Mathématiques.random() pour générer ces clés?

Chaque fois qu'un composant clé des changements Réagir auront créer une nouvelle instance de composant plutôt que de mettre à jour l'actuel, donc, pour des raisons de performances à l'aide des Mathématiques.random() sera sous-optimale pour dire le moins.

Aussi, si vous serez la réorganisation de votre liste des composants de toute façon, à l'aide de l'index de clé ne être utile, soit depuis la Réagir conciliateur sera pas en mesure de simplement déplacer les nœuds DOM associées aux composants, il faut re-créer les DOM-nœuds pour chaque élément de la liste, qui, une fois de plus, ont un rendement sous-optimal.

Mais je répète, ce ne sera un problème si vous avez à nouveau la commande de la liste, donc dans votre cas, si vous êtes sûr de ne sera pas la réorganisation de votre liste en aucune façon, vous pouvez utiliser en toute sécurité l'index comme une clé.

Toutefois, si vous avez l'intention de réorganiser la liste (ou juste pour être sûr) alors je voudrais générer des identifiants uniques pour vos entités - si il n'y a pas de pré-existants identificateurs uniques que vous pouvez utiliser.

Un moyen rapide d'ajouter des id est juste une carte de la liste et attribuer à l'index de chaque élément quand vous recevez (ou la création) de la liste.

const myItemsWithIds = myItems.map((item, index) => { ...item, myId: index });

De cette façon, chaque élément d'obtenir un unique, statique id.

tl;dr Comment choisir une clé pour de nouvelles personnes à trouver cette réponse

1. Si votre élément de la liste ont un id unique (ou d'autres propriétés uniques)
   l'utiliser comme clé de

2. Si vous pouvez combiner les propriétés de votre élément de la liste à créer une valeur unique, utilisez cette combinaison de touche

3. Si aucun de ces travaux mais vous pouvez pinky promettre que vous ne re-commander votre liste, vous pouvez utiliser l'index de tableau sous forme de clé, mais vous êtes probablement mieux de l'ajout de votre propre id de la liste des éléments de la liste, est d'abord reçu ou créé (voir ci-dessus)

De réagir la documentation:

Si vous ne fournissez pas stable clés (par l'utilisation des Mathématiques.random() par exemple), tous les sous-arbres vont être ré-rendu à chaque fois. En donnant aux utilisateurs le choix de choisir la clé, ils ont la capacité de tirer eux-mêmes dans le pied.

Est-ce une bonne pratique? Puis-je l'utiliser sans avoir à vous soucier de quoi que ce soit?

Non et non.

Clés doit être stable, prévisible et unique. Instable clés (comme ceux produits par les Mathématiques.random()) permet de faire de nombreuses instances de composant et les nœuds DOM inutilement recréé, ce qui peut entraîner une dégradation des performances et de l'état a perdu dans les composants enfants.

Permettez-moi d'illustrer cela avec un exemple simple.

class Input extends React.Component {
  handleChange = (e) =>  this.props.onChange({
    value: e.target.value,
    index: this.props.index
  });
  render() {
    return (
      <input value={this.props.value} onChange={this.handleChange}/>  
    )
  }
};

class TextInputs extends React.Component {
  state = {
    textArray: ['hi,','My','Name','is']
  };
  handleChange = ({value, index}) => {
    const {textArray} = this.state;
    textArray[index] = value;
    this.setState({textArray})
  };
  render(){
  return this.state.textArray.map((txt, i) => <Input onChange={this.handleChange} index={i} value={txt} key={Math.random()}/>)
  //using array's index is not as worse but this will also cause bugs.  
  //return this.state.textArray.map((txt, i) => <Input onChange={this.handleChange} index={i} value={txt} key={i}/>)                 
  };
};

Pourquoi je ne peux pas taper plus d'un personnage dans les entrées, demandez-vous?

C'est parce que je suis la cartographie de texte multiples entrées avec les Mathématiques.random() comme clé prop. Chaque fois que je tape un caractère, le onChange prop incendies et le parent du composant changements d'état qui provoque un nouveau rendu. Ce qui signifie en Mathématiques.le hasard est de nouveau appelée pour chaque entrée et chaque nouvelle clé accessoires sont générés.Afin de réagir rend de nouveau les enfants d'Entrée des composants.En d'autres termes chaque fois que vous tapez un caractère réagir crée un nouvel élément d'entrée car la clé prop changé.

En savoir plus sur ce ici