Wenn Sie einzelnen Komponenten eindeutige Schlüssel zuweisen, ist es in Ordnung, Math.random() zu verwenden, um diese Schlüssel zu generieren?

Question

Problem ist das folgende:

Ich habe Daten in Form einer Liste von ein paar tausend Elemente. Einige von ihnen sind Duplikate, und es besteht die Möglichkeit, dass Sie dann auch doppelte Schlüssel haben. Weil ich keine wirkliche „ID“ oder irgendetwas haben, die mir die Möglichkeit geben würde, alle Elemente ihrer ID als eindeutige Schlüssel zu geben, ist es in Ordnung, Math.random() stattdessen zu benutzen?

Soweit ich verstanden, werden die Schlüssel in erster Linie verwendet, um reagieren, um die Komponenten zu unterscheiden. Ich denke, soweit ich nicht wirklich etwas mit den Schlüsseln in meinem Code zu tun habe, sollte das gut gehen? Um sicherzustellen, dass es keine doppelte Zahl gibt, kann ich auch zwei mathematische Zufallszahlen miteinander teilen, um einen fast sicher eindeutigen Schlüssel zu erhalten.

Ist das eine gute Praxis? Kann ich das verwenden, ohne sich um irgendetwas kümmern zu müssen?

Answer 1

Ich denke, dass Ihre Komponente unmount und remount eine neue jedes Mal, wenn es Schlüssel ändert, so für die Leistung Willen mit Math.random() wird suboptimal sein, um es gelinde auszudrücken.

Auch wenn Sie Ihre Liste der Komponenten werden Neuordnen, den Index als Schlüssel nicht sehr hilfreich sein, da entweder reagieren wird nicht in der Lage, nur DOM-Knoten bestehenden zu bewegen und wird stattdessen neu rendern sie müssen, die einmal wieder haben suboptimale Leistung, aber nur in diesem Fall, wenn die Liste neu zu bestellen, so in Ihrem Fall, dass ich für die Verwendung von Index statt Math.random entscheiden würde, vorausgesetzt, dass Sie nicht Ihre Liste neu zu ordnen planen in sowieso.

Wenn Sie beabsichtigen, die Liste neu zu ordnen, dann würde ich eindeutige IDs für Ihre Entitäten erzeugen, wenn es keine vorbestehende eindeutigen Kennungen sind, können Sie verwenden.

Eine schnelle Möglichkeit ids hinzuzufügen, ist nur die Sammlung abzubilden und den Index jedes Element zuweisen, wenn Sie zuerst erhalten (oder erstellen) die Sammlung, z.B.

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

Auf diese Weise erhält jedes Element eine eindeutige, statische ID.

Answer 2

Von react documentation:

Wenn Sie keine stabilen Tasten bieten (von Math.random() zum Beispiel verwendet wird), werden alle Teilbäume werden jedes Mal neu gerendert werden. Indem sie den Benutzern die Wahl geben, den Schlüssel zu wählen, haben sie die Fähigkeit, sich in den Fuß zu schießen.

Answer 3

Keys sollten stabil, berechenbar und eindeutig sein. Instabile Schlüssel (wie die von Math.random() erzeugten) verursachen, dass viele Komponenteninstanzen und DOM-Knoten unnötigerweise neu erstellt werden, was zu Leistungseinbußen und verlorenen Zuständen in untergeordneten Komponenten führen kann.

https://facebook.github.io/react/docs/reconciliation.html

Answer 4

implementieren Sie einfach den folgenden Code in Ihrer Komponente reagieren ...

constructor(props) { 
    super(props); 

    this.keyCount = 0; 
    this.getKey = this.getKey.bind(this); 
} 

getKey(){ 
    return this.keyCount++; 
} 

... und rufen this.getKey() jedes Mal, wenn Sie wie einen neuen Schlüssel benötigen:

key={this.getKey()}