Wenn Sie eine Liste rendern, braucht React eine Möglichkeit zu wissen, welches Element welches zwischen den Renders ist, damit es DOM-Knoten korrekt wiederverwenden, neu ordnen, einfügen oder löschen kann. Der key ist diese Identität.
{users.( (
))}
Den Index als Schlüssel zu verwenden, teilt React mit, dass "das Element an Position 0 dasselbe Element wie zuvor ist" – was sofort bricht, wenn die Liste neu geordnet wird oder Sie von vorne einfügen/löschen:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Ein echtes Symptom: eine Liste von Eingaben, bei der das Tippen in einer Zeile nach dem Löschen/Sortieren zu einer anderen Zeile "springt", weil React das falsche <input> (und seinen internen Wert/Fokus) wiederverwendet hat.
user.id, ein Slug).Schlüssel sind ein Hinweis für den Reconciliation-Algorithmus; wenn Sie sie richtig setzen, bleibt sowohl die Performance als auch der Komponentenzustand korrekt.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden