Keys sind wichtig
Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 36 von 42.
Jedes von map zurückgegebene Element benötigt einen key, eine stabile, eindeutige Bezeichnung für dieses Element:
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}Warum? Wenn sich das Array ändert, vergleicht React die neue Liste mit der alten. Schlüssel verraten ihm, welches Element welches ist, sodass es Elemente verschiebt, anstatt sie neu zu erstellen, wodurch Zustand, Fokus und Animationen erhalten bleiben.
Bester Key: Eine echte ID aus Ihren Daten. Akzeptabel: Jeder Wert, der pro Element eindeutig und stabil ist (wie unsere Frucht-Namen). Letzte Option: Der Array-Index. Er macht das Umordnen zunichte, da Position nicht Identität bedeutet.
Probier es selbst
Diese Lektion enthält keine Programmieraufgabe.
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Grundlagen
1Lerne React kennen
Was ist React?Deine erste KomponenteDie Regel des einen Eltern-ElementsJSX ist nicht HTMLZusammenfassung: Lerne React kennen4Props
Was sind Props?Props übergebenZwei PropsGleiche Komponente, neue DatenDie Children-PropZusammenfassung: Props7Bedingungen & Listen
Ternäres RendernAnzeigen mit &&Eine Liste rendernKeys sind wichtigErst filtern, dann mappenZusammenfassung: Bedingungen & Listen