Was soll ich als eindeutige Kennung für ein Element eines zugeordneten Arrays verwenden?

Question

Ich habe somewhere gelesen, dass man dies offenbar

{someArray.map(function (element) { 
    return (
    <span key={element.id}>{element.name}</span> 
); 
})} 

anstelle dieses

{someArray.map(function (element, key) { 
    return (
    <span key={key}>{element.name}</span> 
); 
})} 

verwenden sollten, ist der Grund, dass key die Reihenfolge der Array-Elemente nicht unbedingt bewahren, weil es nicht ist "gebunden" an das Array-Element.

Als Konsequenz würde React offensichtlich mehr Arbeit als bei Verwendung der Element-ID element.id verrichten und möglicherweise die Reihenfolge der gerenderten Elemente vermasseln.

The docs scheinen im Einklang mit der oben zu sein:

In der Praxis einen Schlüssel zu finden, nicht wirklich schwer. Die meiste Zeit hat das Element, das Sie anzeigen werden, bereits eine eindeutige ID.

Als jemand, der die ganze Zeit key verwendet, bin ich nach einigen Beweisen, dass ich nicht sollte.

Hat jemand ein Beispiel? Oder hat jemand die beiden Blöcke verglichen, um zu sehen, ob sie sich leistungsmäßig unterscheiden?

Answer 1

hat einige Forschung zweiten Ansatz ist gut Wenn React versöhnt die keyed Kinder, wird es sicherstellen, dass jedes Kind mit Schlüssel wird neu bestellt (statt Clobbered) oder zerstört (statt wiederverwendet). Schlüssel sollten stabil, vorhersehbar und einzigartig sein. Instabile Schlüssel (wie sie von Math.random() erzeugt werden) führen dazu, dass viele Knoten unnötigerweise neu erstellt werden, was zu Leistungseinbußen und verlorenen Zuständen in untergeordneten Komponenten führen kann.