React-Schlüssel, ja! Sie brauchen sie, aber warum genau?

Es gibt noch eine weitere Sache, an die Sie denken müssen, und das ist die React Schlüssel Attribut hat, muss jedes Element der gerenderten Liste dieses Attribut haben. Dieses Konzept ist eines der ersten Dinge, die jeder Front-End-Entwickler lernt React am Anfang ihrer Reise. Lassen Sie uns nun ein wenig tiefer graben, um herauszufinden, warum dies der Fall ist und wann wir einige Abkürzungen nehmen können.

Warum brauchen wir dieses Schlüsselattribut?

Die einfachste Antwort wäre hier "zur Optimierung von Wiederaufbereitungen", aber die umfassendere Antwort muss zumindest das Konzept der React Überleitung. Dabei geht es darum, herauszufinden, wie die Benutzeroberfläche am effizientesten aktualisiert werden kann. Um das schnell zu tun, React muss entscheiden, welche Teile des Baums der Elemente aktualisiert werden müssen 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 implementiert den Diffing-Algorithmus, der sich auf zwei Annahmen stützt:

1. Zwei verschiedene Arten von Elementen werden niemals gleich sein - also rendern Sie diese neu.
2. Die Entwickler können diesen Prozess durch Schlüsselattribute manuell optimieren, so dass die Elemente, auch wenn sich ihre Reihenfolge geändert hat, schneller lokalisiert und verglichen werden können.

Daraus können wir schließen, dass jede React Schlüssel sollten auch eindeutig sein (innerhalb der Liste der Elemente, nicht global) und stabil (sollten sich nicht ändern). Aber was könnte passieren, wenn sie nicht stabil sind?

Einzigartigkeit, Stabilität und Array-Index

Wie wir bereits erwähnt haben, React-Tasten sollte stabil und eindeutig sein. Der einfachste Weg, dies zu erreichen, ist die Verwendung einer eindeutigen ID (z. B. aus einer Datenbank) und die Übergabe 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 übergeben können? Nun, wenn wir nichts als Schlüssel übergeben, React nimmt standardmäßig den aktuellen Array-Index (da er innerhalb der Liste eindeutig ist), um ihn für uns zu verarbeiten, aber es wird uns auch eine nette Fehlermeldung in der Konsole geben:

Warum ist das der Fall? Die Antwort ist, dass der Array-Index nicht stabil ist. Wenn sich die Reihenfolge der Elemente ändert, ändert sich jeder der Schlüssel und wir haben ein Problem. Wenn React Tritt eine Situation ein, in der die Reihenfolge in einer Liste von Elementen geändert wurde, wird immer noch versucht, sie nach den Schlüsseln zu vergleichen, was bedeutet, dass jeder Vergleich dazu führt, dass eine Komponente neu erstellt wird und als Ergebnis die gesamte Liste von Grund auf neu erstellt werden muss. Darüber hinaus kann es zu unerwarteten Problemen kommen, z. B. Aktualisierungen des Komponentenzustands für Elemente wie unkontrollierte Eingaben und andere magische, schwer zu debuggende Probleme.

Ausnahmen

Kommen wir zurück zum Array-Index. Wenn Sie ihn als React Schlüssel so problematisch sein kann, warum React standardmäßig verwenden wird? Gibt es einen Anwendungsfall, bei dem dies in Ordnung ist? Die Antwort ist ja, der Anwendungsfall dafür sind statische Listen. Wenn Sie sicher sind, dass eine Liste, die Sie rendern, nie ihre Reihenfolge ändern 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önnen auch feststellen, dass die Übergabe von Indizes als Schlüssel die React Fehlermeldung verschwindet, während gleichzeitig einige der externen Linters einen Fehler oder eine Warnung anzeigen. Dies ist darauf zurückzuführen, dass die explizite Verwendung von Indizes als Schlüssel als schlechte Praxis angesehen wird und einige Linter dies als Fehler behandeln, während React 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ür, wann es in Ordnung sein kann, diese Ausnahme zu verwenden, wären ein Dropdown mit einer statischen Liste von Schaltflächen oder die Anzeige einer Liste von Elementen mit den Adressdaten Ihres Unternehmens.

Eine Alternative zu einem datensatzbasierten Schlüssel

Nehmen wir an, dass keine der oben genannten Möglichkeiten für uns in Frage kommt. Wir müssen zum Beispiel eine Liste von Elementen anzeigen, die auf einem Array von Strings basiert, die dupliziert werden können, aber auch neu geordnet werden können. In diesem Fall können wir keine der Zeichenketten verwenden, da sie nicht eindeutig sind (dies kann auch zu einigen magischen Fehlern führen), und der Array-Index ist nicht gut genug, da wir die Reihenfolge der Elemente ändern werden. Das letzte, worauf wir uns in solchen Situationen verlassen können, ist die Verwendung von externen Bezeichnern. Denken Sie daran, dass diese stabil sein müssen, also können wir nicht einfach Math.random() verwenden. Es gibt einige NPM-Pakete, die wir in solchen Fällen verwenden können, zum Beispiel das "uuid" Paket. Solche Werkzeuge können uns dabei helfen, unsere Listenschlüssel stabil und eindeutig zu halten, selbst wenn wir keine geeigneten Bezeichner in unserem Datensatz finden. Wir sollten in Erwägung ziehen, zuerst die Datenbank-ID und den Array-Index (wenn möglich) zu verwenden, um die Anzahl der Pakete zu minimieren, die von unserem Projekt.

Zum Abschluss

• Jedes Element in der Liste der React Elemente sollten ein eindeutiges, stabiles Schlüsselattribut haben,
• React-Tasten werden zur Beschleunigung der Versöhnungsprozess und eine unnötige Neubildung von Elementen auf den Listen zu vermeiden,
• Die beste Quelle für Schlüssel ist die eindeutige ID der Dateneingabe (z. B. aus der Datenbank),
• Sie können den Array-Index als Schlüssel verwenden, aber nur für eine statische Liste, deren Reihenfolge sich nicht ändern wird,
• Wenn es keine andere Möglichkeit gibt, stabile und eindeutige Schlüssel zu erhalten, sollten Sie die Verwendung externer ID-Anbieter in Betracht ziehen, z. B. das "uuid"-Paket.

Lesen Sie mehr:

Warum Sie (wahrscheinlich) Typescript verwenden sollten

Wie kann man ein Projekt nicht durch schlechte Programmierpraktiken zerstören?

Strategien zum Abrufen von Daten in NextJS