Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Das "key"-Attribut kennenlernen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das key-Attribut hat in React eine zentrale Bedeutung beim Umgang mit Arrays. Lernen Sie, wie Sie mit dem key-Attribut React dabei helfen, die Reihenfolge einzelner Elemente korrekt beizubehalten.
09:01

Transkript

In diesem Video werden wir uns damit auseinandersetzen, wie React einzelne Komponenten updatet. Betrachten wir dazu das Beispiel der Produktliste. Wir starten mit einer Liste aus drei Produkten, die in der App der Reihe nach gerendert werden. Wir haben also den Metal Chair, den Wooden Chair, und den Oak Chair. Und wir möchten einen Button, mit dem wir den ersten Chair in dieser Liste entfernen können. Dazu hier. Wir wenden einmal splice auf das Array an. Ab dem Element mit dem Index 1 und entnehmen so viele Elemente, wie Länge -1. Wir bauen uns das Frontend einmal zusammen uns sehen uns das Ganze im Browser an. Einmal aktualisieren. Bis jetzt passt alles. Wir haben Metal Chair, Wooden Chair, Oak Chair, wir entfernen den ersten. Remove first. Und wie erwartet, Wooden Chair ist noch da und Oak Chair ist auch noch da. Jetzt probieren wir mal etwas Neues. Wir aktualisieren nochmal. Wieder den Ausgangszustand. Und jetzt setzen wir den Metal Chair auf beobachtet. "You are watching the product". Jetzt lassen wir wieder das erste Element aus der Liste entfernen. Und wir sehen etwas, was wir nicht erwartet haben. Der Wooden Chair, der vorher nicht beobachtet wurde, wird jetzt auch immer noch beobachtet. Wie kann das sein? Lassen Sie uns doch mal den Lifecycle unserer Products verfolgen. Dazu definieren wir componentWillUpdate und componentDidUpdate. Das heißt, wir lassen uns bei jedem Product vor und nach jedem Update anzeigen, mit welchem Titel wir es hier zu tun haben, und wie der Zustand von watched gerade ist, und welcher Titel als Nächstes kommen wird, und welcher watched-Zustand als Nächstes da sein wird. Und das Gleiche dann nochmal in Retrospektive, und zwar welchen Titel haben wir gerade, welchen watched-Zustand haben wir, und von welchem Titel kommen wir, von welchem watched-Zustand kommen wir gerade. Zusätzlich möchten wir uns noch anzeigen lassen, componentWillUnmount, welchen Titel werden wir als Nächstes unmounten. Das Ganze einmal speichern, und nochmal zusammenbauen lassen. Und wir gehen gleich nochmal in den Browser, aktualisieren die Seite, wieder der Ausgangszustand. Jetzt nochmal den Metal Chair beobachten. Und wir sehen, wir sind bei Metal Chair, Zustand watched gleich false, wechseln auf Metal Chair, Zustand watched gleich true. OK, das passt alles. Wir sind gerade watched true und wir kommen von watched false. Das passt auch. OK, jetzt können wir das erste Element entfernen. Remove first. Und was sehen wir jetzt? Die componentWillUpdate-Routinen werden gerade ausgelöst. Wir sehen, wir haben hier das erste Product. Für dieses Product "'Metal Chair' (true)", das ist der Ist-Zustand, "changes to 'Wooden Chair' (true)". Das ist jetzt interessant, denn wir würden eigentlich erwarten, dass dieses erste Product einfach unmounted, und das zweite Product nachrückt, und zwar mitsamt seinem Zustand. Sehen wir mal weiter. componentWillUpdate für das zweite Product, "'Wooden Chair' (false)" wechselt auf "'Oak Chair' (false)". OK. Und das dritte Product, "Oak Chair will unmount". OK, das heißt, wir können also zusammenfassend sagen, ein Product unmounted, das ist so weit richtig, insofern wir eins entfernt haben und nur noch zwei Products da sein sollten. Aber im Gegensatz zu unseren Erwartungen wird nicht das erste Product entfernt, sondern das letzte. Das heißt wiederum, dass der Zustand dieses ersten Products erhalten bleibt und nur die Props des zweiten Products, also des Wooden Chair, auf den Metal Chair nachziehen. Sehen wir mal weiter im Lifecycle. Jetzt werden die componentDidUpdate- Routinen getriggert. "'Wooden Chair' (true) changed from 'Metal Chair' (true)". Das heißt, die Props sind richtig nachgezogen, aber der Zustand ist gleich geblieben. OK. Und "'Oak Chair' (false)" hat gewechselt auf "'Wooden Chair' (false)", also auf die zweite Position, das ist auch in Ordnung. Wie kommt dieses Verhalten also zustande? Wenn wir das Ganze mal aus Sicht von React betrachten, und zwar eine Vorher/nachher-Betrachtung, dann können wir sagen, wir hatten zuvor ein Array mit drei Products. Dann wird neu gerendert, und auf einmal haben wir ein Array mit zwei Products. Das heißt, React kann im ersten Schritt einmal nur sagen, ein Product muss entfernt werden. Was macht React also, um möglichst effizient vorzugehen? React weiß, dass wir im DOM drei Products vorliegen haben, also kann es einfach eins davon entfernen, und muss dann nur noch die richtigen Props zuordnen. Diese Props stehen ja in unserem Array in der App.js, wie wir wissen. Genau an dieser Stelle. beziehungsweise wird durch ein remove mit der splice-Operation ein Element dieses Arrays entfernt. Jetzt gibt es aber ein React-spezifisches Verhalten, das einfach nur der Performance dient. Und zwar sagt React: Okay, wir hatten davor drei Products, jetzt haben wir zwei. Aber warum sollten wir alle drei, die wir davor hatten, einfach wegwerfen und zusätzlich zwei neue generieren? Machen wir es doch einfach so, dass wir von diesen drei Products nur eins wegwerfen und einfach bei den anderen beiden React-Elementen die Elemente beibehalten, aber nur die Props ändern. Und genau hier ist eigentlich schon der Knackpunkt. Die Props wurden ja, wie wir gesehen haben, richtig übernommen, aber der State wurde beibehalten. Der State watched von Metal Chair wurde beibehalten und wurde sozusagen auf Wooden Chair übernommen. Das heißt also, wir müssen, wenn wir in React mit Arrays arbeiten, vorsichtig sein, damit hier keine Verwechslungen auftreten, da wir sonst inkonsistente Zustände bekommen. Wir könnten einen Zustand bekommen, in dem wir Props auf ein React-Element mit einem anderen State mappen, als wir es gern haben würden. Das heißt also, wir könnten dieses Problem eigentlich ganz einfach lösen, wenn wir React mitteilen könnten: Wenn du schon eines dieser React-Elemente löschst, eines dieser drei Products, dann lösch doch einfach das erste, denn das wollen wir sowieso weg haben. Und dann wäre auch dieser State weg, den wir nicht mehr brauchen. Und glücklicherweise können wir auch genau das ganz einfach in React umsetzen. Und zwar gibt es dazu ein spezielles key-Attribut beziehungsweise key-Prop. Ohne dieses key-Prop kann React seine Elemente und Komponenten im Prinzip nur nach Props unterscheiden. Da State als interner Zustand betrachtet wird, wird React beim Rerendern nicht in den State seiner Komponenten hineinblicken. Wir können aber, und das sollten wir auch jedes Mal, wenn wir mit Arrays in React arbeiten, jeder Komponente in einem Array dieses key-Prop mitgeben, anhand dessen React Unterscheidungen später beim Rerendern durchführen kann. Das heißt, wir müssen eigentlich jeder Komponente in diesem Array mit dem key-Prop einfach nur einen eindeutigen Identifier mitgeben, anhand dessen React unterscheiden kann, welche Komponente genau es aus dem Array löschen soll. Dieser Identifier muss auch nicht global eindeutig sein, sondern einfach nur in dieser Liste eindeutig. Der Einfachheit halber können wir hier einfach den Titel des Produkts nehmen, da wir wissen, dass wir hier keine doppelten Titel verwenden. Im realen Anwendungsfall sollten Sie vielleicht eine ID generieren, wenn Sie wissen, dass beispielsweise der Titel doppelt vorkommen kann. Wir speichern das Ganze mal, und lassen uns das von Babel zusammenbauen. Wir testen es nochmal im Browser. Remove first. Jetzt würden wir erwarten, dass der Metal Chair removed wird. Vorher setzen wir noch den Zustand auf watched. "(false) to (true)", richtig, "(true) from (false)", richtig. Und Remove first. Und wir sehen, "'Wooden Chair' (false) changes to 'Wooden Chair' (false)", also keine Änderung, das passt. "'Oak Chair' (false) changes to 'Oak Chair' (false)" passt auch, keine Änderung. Und tatsächlich wird jetzt korrekterweise das Product Metal Chair geunmountet. "'Wooden Chair' (false) changed from 'Wooden Chair' (false)" passt auch. "'Oak Chair' (false) changed from 'Oak Chair' (false)" passt auch. Das heißt, das Ganze hat funktioniert. Sie haben gelernt, wie React auf eine Aktualisierung von Listen reagiert und entsprechend geänderte Nodes rendert. Sie wissen nun, dass Sie bei der Verwendung von Listen das key-Prop verwenden sollten, damit React auch beim Update die Daten den richtigen Komponenten zuordnen kann.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!