Warum Sie das React Key-Prop benötigen
Sie sehen diese Warnung in Ihrer Konsole: "Each child in a list should have a unique 'key' prop."
Viele Entwickler ignorieren sie. Das ist ein Fehler. Das Key-Prop ist nicht nur eine Warnung. Es ist ein Werkzeug für Performance und zur Vermeidung von Fehlern.
Was bewirkt das Key-Prop?
React verwendet das Key, um Listenelemente zu identifizieren. Es teilt React mit, welches Element sich geändert hat, verschoben wurde oder entfernt wurde.
Ohne ein Key muss React die gesamte Liste neu rendern. Dies verlangsamt Ihre App und führt zu Datenfehlern.
Das Bibliotheks-Beispiel
Stellen Sie sich eine Bibliothek mit 1.000 Büchern vor. Wenn Sie ein neues Buch in der Mitte hinzufügen, müssen Sie jedes andere Buch verschieben, um Platz zu schaffen.
In React fungiert das Key als eindeutige ID. Es verleiht jedem Element eine Identität. Während des Reconciliation-Prozesses vergleicht React die neue Liste mit der alten.
Das Problem fehlender Keys
Wenn Sie das Key weglassen, denkt React, dass jedes Element dasselbe ist. Wenn Sie am Anfang ein Element hinzufügen, denkt React, dass sich die gesamte Liste geändert hat. Es erstellt jedes einzelne Element im DOM neu. Dies verschwendet Arbeitsspeicher und CPU-Leistung.
Die Index-Falle
Neue Entwickler verwenden oft den Array-Index als Key.
Beispiel: key={index}
Dies ist gefährlich für dynamische Listen. Wenn Sie Elemente sortieren, filtern oder löschen, ändert sich der Index. Dies führt zu fehlerhaften UI-Zuständen und Bugs.
Best Practices für Keys
- Verwenden Sie stabile IDs aus Ihrer Datenbank (wie
user.id). - Stellen Sie sicher, dass Keys unter Geschwisterelementen eindeutig sind.
- Vermeiden Sie die Verwendung von
Math.random()als Key. Es ändert sich bei jedem Render und verursacht UI-Flackern. - Wenn Ihre Daten keine ID haben, generieren Sie eine mit
uuidodernanoid, wenn Sie die Daten abrufen.
Leitfaden zur Key-Auswahl
• Datenbank-ID: Am besten. Sehr stabil und schnell. • Array-Index: Nur für statische Listen verwenden, die sich nie ändern. • Math.random(): Vermeiden. Es erzwingt unnötige Re-Mounts.
Zusammenfassung
Ein gutes Key macht Ihre App schneller. Es kann bis zu 40 % unnötige Re-Render einsparen. Priorisieren Sie immer stabile und eindeutige Identifikatoren.