{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"reaktionsschlussel-ja-man-braucht-sie-aber-warum-genau","status":"publish","type":"post","link":"https:\/\/thecodest.co\/de\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React-Schl\u00fcssel, ja! Sie brauchen sie, aber warum genau?"},"content":{"rendered":"

Es gibt noch eine weitere Sache, an die Sie denken m\u00fcssen, und das ist die React<\/a> Schl\u00fcssel<\/strong> Attribut hat, muss jedes Element der gerenderten Liste dieses Attribut haben. Dieses Konzept ist eines der ersten Dinge, die jedes Front-End Entwickler<\/a> lernt \u00fcber React<\/strong> am Anfang ihrer Reise. Lassen Sie uns nun ein wenig tiefer graben, um herauszufinden, warum dies der Fall ist und wann wir einige Abk\u00fcrzungen nehmen k\u00f6nnen.<\/p>\n

Warum brauchen wir dieses Schl\u00fcsselattribut?<\/h2>\n

Die einfachste Antwort w\u00e4re hier \"zur Optimierung von Wiederaufbereitungen\", aber die umfassendere Antwort muss zumindest das Konzept der React \u00dcberleitung<\/strong>. Dabei geht es darum, herauszufinden, wie die Benutzeroberfl\u00e4che am effizientesten aktualisiert werden kann. Um das schnell zu tun, React<\/strong> muss entscheiden, welche Teile des Baums der Elemente aktualisiert werden m\u00fcssen und welche nicht. Das Problem ist, dass es viele Elemente im DOM geben kann und der Vergleich der einzelnen Elemente bei der Entscheidung, welches aktualisiert werden soll, ziemlich teuer ist. Um dies zu optimieren, React<\/strong> implementiert den Diffing-Algorithmus, der sich auf zwei Annahmen st\u00fctzt:<\/p>\n

    \n
  1. Zwei verschiedene Arten von Elementen werden niemals gleich sein - also rendern Sie diese neu.<\/li>\n
  2. Die Entwickler k\u00f6nnen diesen Prozess durch Schl\u00fcsselattribute manuell optimieren, so dass die Elemente, auch wenn sich ihre Reihenfolge ge\u00e4ndert hat, schneller lokalisiert und verglichen werden k\u00f6nnen.<\/li>\n<\/ol>\n

    Daraus k\u00f6nnen wir schlie\u00dfen, dass jede React Schl\u00fcssel<\/strong> sollten auch eindeutig sein (innerhalb der Liste der Elemente, nicht global) und stabil (sollten sich nicht \u00e4ndern). Aber was k\u00f6nnte passieren, wenn sie nicht stabil sind?<\/p>\n

    Einzigartigkeit, Stabilit\u00e4t und Array-Index<\/h2>\n

    Wie wir bereits erw\u00e4hnt haben, React-Tasten<\/strong> sollte stabil und eindeutig sein. Der einfachste Weg, dies zu erreichen, ist die Verwendung einer eindeutigen ID (z. B. aus einer Datenbank) und die \u00dcbergabe dieser ID an jedes Element beim Mapping eines Arrays. Aber was ist mit Situationen, in denen wir keine ID, keinen Namen oder andere eindeutige Bezeichner haben, die wir an jedes Element \u00fcbergeben k\u00f6nnen? Nun, wenn wir nichts als Schl\u00fcssel \u00fcbergeben, React<\/strong> nimmt standardm\u00e4\u00dfig den aktuellen Array-Index (da er innerhalb dieser Liste eindeutig ist), um ihn f\u00fcr us<\/a>aber es wird uns auch eine nette Fehlermeldung in der Konsole geben:<\/p>\n

    \"\"<\/p>\n

    Warum ist das der Fall? Die Antwort ist, dass der Array-Index nicht stabil ist. Wenn sich die Reihenfolge der Elemente \u00e4ndert, \u00e4ndert sich jeder der Schl\u00fcssel und wir haben ein Problem. Wenn React<\/strong> Tritt eine Situation ein, in der die Reihenfolge in einer Liste von Elementen ge\u00e4ndert wurde, wird immer noch versucht, sie nach den Schl\u00fcsseln zu vergleichen, was bedeutet, dass jeder Vergleich dazu f\u00fchrt, dass eine Komponente neu erstellt wird und als Ergebnis die gesamte Liste von Grund auf neu erstellt werden muss. Dar\u00fcber hinaus kann es zu unerwarteten Problemen kommen, z. B. Aktualisierungen des Komponentenzustands f\u00fcr Elemente wie unkontrollierte Eingaben und andere magische, schwer zu debuggende Probleme.<\/p>\n

    Ausnahmen<\/h2>\n

    Kommen wir zur\u00fcck zum Array-Index. Wenn Sie ihn als React Schl\u00fcssel<\/strong> so problematisch sein kann, warum React<\/strong> standardm\u00e4\u00dfig verwenden wird? Gibt es einen Anwendungsfall, bei dem dies in Ordnung ist? Die Antwort ist ja, der Anwendungsfall daf\u00fcr sind statische Listen. Wenn Sie sicher sind, dass eine Liste, die Sie rendern, nie ihre Reihenfolge \u00e4ndern wird, ist es sicher, Array-Index zu verwenden, aber denken Sie daran, wenn Sie irgendwelche eindeutigen Bezeichner haben, ist es immer noch besser, sie stattdessen zu verwenden. Sie k\u00f6nnen auch feststellen, dass die \u00dcbergabe von Indizes als Schl\u00fcssel die React<\/strong> Fehlermeldung verschwindet, w\u00e4hrend gleichzeitig einige der externen Linters einen Fehler oder eine Warnung anzeigen. Dies ist darauf zur\u00fcckzuf\u00fchren, dass die explizite Verwendung von Indizes als Schl\u00fcssel als schlechte Praxis angesehen wird und einige Linter dies als Fehler behandeln, w\u00e4hrend React<\/strong> selbst betrachtet es als eine \"die Entwickler wissen, was sie tun\" Situation - also tun Sie das nicht, wenn Sie nicht wirklich wissen, was Sie tun. Ein paar Beispiele daf\u00fcr, wann es in Ordnung sein kann, diese Ausnahme zu verwenden, w\u00e4ren ein Dropdown mit einer statischen Liste von Schaltfl\u00e4chen oder die Anzeige einer Liste von Elementen mit den Adressdaten Ihres Unternehmens.<\/p>\n

    Eine Alternative zu einem datensatzbasierten Schl\u00fcssel<\/h2>\n

    Nehmen wir an, dass keine der oben genannten M\u00f6glichkeiten f\u00fcr uns in Frage kommt. Wir m\u00fcssen zum Beispiel eine Liste von Elementen anzeigen, die auf einem Array von Strings basiert, die dupliziert werden k\u00f6nnen, aber auch neu geordnet werden k\u00f6nnen. In diesem Fall k\u00f6nnen wir keine der Zeichenketten verwenden, da sie nicht eindeutig sind (dies kann auch zu einigen magischen Fehlern f\u00fchren), und der Array-Index ist nicht gut genug, da wir die Reihenfolge der Elemente \u00e4ndern werden. Das letzte, worauf wir uns in solchen Situationen verlassen k\u00f6nnen, ist die Verwendung von externen Bezeichnern. Denken Sie daran, dass diese stabil sein m\u00fcssen, also k\u00f6nnen wir nicht einfach Math.random() verwenden. Es gibt einige NPM-Pakete, die wir in solchen F\u00e4llen verwenden k\u00f6nnen, zum Beispiel das \"uuid\"<\/a> Paket. Solche Werkzeuge k\u00f6nnen uns dabei helfen, unsere Listenschl\u00fcssel stabil und eindeutig zu halten, selbst wenn wir keine geeigneten Bezeichner in unserem Daten<\/a> setzen. Wir sollten in Betracht ziehen, zuerst die Datenbank-ID und den Array-Index (wenn m\u00f6glich) zu verwenden, um die Anzahl der Pakete zu minimieren, die von unserem Projekt<\/a>.<\/p>\n

    Zum Abschluss<\/h2>\n