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

Die Bedeutung des Lebenszyklus einer Komponente

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
React-Komponenten implementieren einen wohldefinierten Lebenszyklus mit verschiedenen Phasen. Andreas Gerö zeigt Ihnen diesen Lebenszyklus und erklärt die Bedeutung der verschiedenen Phasen.
12:16

Transkript

React-Komponenten besitzen einen Lifecycle, also einen Lebenszyklus, der definiert, in welchen Schritten diese Komponenten erstellt, aktualisiert, und zerstört werden. Sehen wir uns diesen Lebenszyklus an. Beginnen wir mit der Initialisierung. Zuerst werden die defaultProps überprüft. Das heißt, React überprüft, ob die Props, für die Standardwerte vorgegeben sind, bereits belegt wurden, und wenn nicht werden diese von den defaultProps übernommen. Als Nächstes wird der initialState abgefragt. Das ist eine Funktion, die nur im ES5-Kontext aufgerufen wird. In ES6 benutzt man dazu den constructor. Das heißt, in ES6 wird der constructor benutzt, um das state-Objekt zu initialisieren. Und in ES5 wird initialState aufgerufen, um den anfänglichen Zustand der Komponente zu befüllen. Anschließend beginnt der Prozess des erstmaligen Renderns. Das heißt, bevor zum ersten Mal gerendert wird, wird eine Methode componentWillMount aufgerufen, und nach dem ersten Rendern eine Methode componentDidMount. Diese Methoden kann man überschreiben, insofern man die React.Component beerbt und sich damit in diesen Lifecycle einklinken und entsprechende Vorgänge in diesen Methoden durchführen. Der nächste Schritt im Lifecycle ist der Update-Lifecycle. Die Update-Schritt werden also immer ab dem zweiten Rendern aufgerufen. Die erste Methode hierbei ist die Methode componentWillReceiveProps. In diese Methode kann man sich einhängen, um neue Props in den State zu übertragen, falls dies im aktuellen Anwendungsfall nötig ist. Die nächste Methode ist shouldComponentUpdate. Diese Methode ist besonders für Performance-Optimierungen sehr wichtig. Hier kann man dem React-Framework nämlich Hinweise darauf geben, ob die aktuelle Komponente überhaupt tatsächlich geupdatet werden soll oder nicht. Damit könnte man React einiges an Zeit sparen, um aufwändige Vergleiche durchzuführen. Und schließlich analog zur Initialisierung gibt es auch ab dem zweiten Render-Vorgang eine Methode componentWillUpdate und eine Methode componentDidUpdate. Auch hier kann man sich direkt kurz vor dem Rendern einhängen, oder auch kurz nach dem zweiten Rendern wieder einhängen. Schließlich gibt es noch den Unmounting-Lifecycle. Dieser ist sehr schnell beschrieben, denn er besteht nur aus einer einzigen Methode, nämlich componentWillUnmount. Diese ist besonders dazu geeignet, Aufräumarbeiten durchzuführen, wie zum Beispiel geöffnete Listener zu schließen. Lassen Sie uns ein paar Beispiele dazu betrachten. Wir haben hier eine App.js, die drei Produkte mit sich führt. Ein "Metal Chair", ein "Wooden Chair", und ein leeres Produkt. Die render-Methode beschreibt ein div mit einem padding von 20px, eine Überschrift "Product Listing", und einen button, mit dem wir das letzte Product entfernen können. Anschließend wird die Liste der Products über die Product-Komponente in das div gerendert. Werfen wir einen Blick auf die Product.js. Wir haben hier wieder defaultProps, die einen title und eine description belegen. Und wir haben den state initialisiert, in dem wir watched auf false setzen. Wir haben hier auch eine Methode _handleWatchClick, mit der wir den state aktualisieren können, indem watched negieren. Und in der render-Methode wird das Produkt durch einen div dargestellt, der eine Überschrift mit dem Titel, einen Absatz mit der Description, und ein Absatz mit dem Watch!-, Unwatch-Button enthält. Sehen wir uns jetzt die Lifecycle-Methoden des Product an. Beginnen wir mit dem Initialisierungs-Lifecycle. componentWillMount und componentDidMount. componentWillMount wird vor dem ersten initialen Rendern durchgeführt. An dieser Stelle dürfen wir keine Änderungen von State oder von den Props durchführen. Die Props sind ohnehin schreibgeschützt. Und wir dürfen die render-Methode nicht erneut triggern, denn die wird ohnehin durchgeführt. Lassen wir uns an dieser Stelle die aktuellen Props ausgeben. Und lassen wir uns auch mit document.getElementsByClassName diejenigen DOM-Elemente mit der Klasse prod ausgeben. Dazu schauen wir nochmal kurz in die render-Methode des Product. Wir fügen hier einen className hinzu mit der Klasse prod. Hier ist ein kleiner Unterschied zwischen normalem HTML und JSX. Was in normalem HTML normalerweise class heißen würde, heißt an dieser Stelle className. Die JSX-Syntax möchte einfach an dieser Stelle Probleme mit bereits belegten Wörtern in JavaScript vermeiden. Deshalb className="prod". Nochmal zurück zu unserem Lifecycle. componentDidMount, diese Methode wird direkt nach dem ersten Rendern ausgeführt. Das heißt, das DOM ist an dieser Stelle bereits verfügbar. Diese Methode ist also sehr gut geeignet, um beispielsweise Dinge zu tun wie Daten zu laden und danach ins DOM zu rendern, oder sonstige Operationen, für die ein bereits fertig geladenes DOM nötig ist. An dieser Stelle ist es auch explizit erlaubt, render erneut aufzurufen, aber natürlich über this.setState. Das heißt, wenn man beispielsweise an dieser Stelle Daten nachladen möchte vom Server, würde man diese Daten laden, und sobald sie angekommen sind this.setState aufrufen, und die Komponente würde erneut rendern und damit auch den neuen State darstellen. Wir lassen uns an dieser Stelle aber auch wieder alle DOM-Elemente mit der Klasse prod ausgeben. Wir kompilieren es einmal. Und wir sehen uns das Ganze im Browser an. Einmal aktualisieren. Und wir erkennen, wir sollten hier neue Ausgaben haben in der Konsole. Wir wollten nämlich dreimal die Props unserer Products sehen, dreimal die DOM-Elemente mit der Klasse prod vor dem Rendern, und dreimal die DOM-Element mit der Klasse prod nach dem ersten Rendern. Wir sehen hier auch schon die Props. "Metal Chair" mit "My favorite Chair!", Nummer 0. "Wooden Chair" mit "Super duper Chair!", Nummer 1. Und an dieser Stelle hatten wir keine Props vergeben, deshalb die defaultProps "Untitled", "This product has no description", Nummer 2. Hier auch die DOM-Elemente mit der Klasse prod vor dem Rendern. Wir sehen also hier drei leere Listen. Wenn ich das hier aufklappe, werden zwar die entsprechenden div angezeigt, aber diese kleine Info-Anzeige von Chrome sagt mir "Object value at left was snapshotted when logged, value below was evaluated just now." Das heißt, also, wir hatten tatsächlich eine leere Liste zum Zeitpunkt des Loggens. Chrome war nur so schlau, jetzt herauszufinden, dass wir diese div damit meinen. Andererseits, hier weiter unten, das sind die Log-Ausgaben in der Methode componentDidMount. Und hier sehen wir, dass tatsächlich zum Log-Zeitpunkt diese div bereits vorhanden waren. Sehen wir uns die weiteren Lifecycle-Methoden an. Wir haben hier componentWillReceiveProps, shouldComponentUpdate. Mit componentWillReceiveProps können Sie Prop-Änderungen direkt in den State übernehmen. Hier kann der State auch geändert werden, ohne ein erneutes Rendern auszulösen. Diese Methode wird aber eher selten benötigt. shouldComponentUpdate ist speziell für Performance-Optimierungen zuständig. Das heißt, wenn Sie diese Methode nicht manuell implementieren, liefert sie standardmäßig immer true zurück. Das heißt, ohne jede manuelle Hilfe meint React, dass jede Komponente neu geupdatet werden muss. Das heißt, mit dieser Methode könnten Sie React helfen, Render-Zeit einzusparen. Performance-Tuning ist aber ein fortgeschrittenes Thema und an dieser Stelle noch nicht relevant. componentWillUpdate und componentDidUpdate sind beide analog zu verstehen zu componentWillMount und componentDidMount. Das heißt, diese beiden Methoden werden genauso vor dem Rendern und nach dem Rendern durchgeführt, aber erst ab dem zweiten Rendern. Wir lassen uns an dieser Stelle einmal ausgeben einen Alert, also ein kleines Benachrichtigungsfenster, kurz bevor das Product neu gerendert wird und kurz nachdem es neu gerendert wird. Im Speziellen interessieren wir uns für den State. Lassen wir uns also anzeigen, bevor der State sich verändert, wie er sich verändern wird, und nachdem er sich geändert hat, wie er sich verändert hat. Sehen wir einmal in den Browser. Lassen Sie uns nochmal den Metal Chair beobachten. Wir drücken auf Watch!. Und wir sehen "Product Metal Chair changes to watched: true". Also noch sind wir auf false. Jetzt drücken wir OK. Jetzt wurde tatsächlich das Product neu gerendert. Wir sehen den Button, bei dem sich der Titel geändert hat, und wir sehen diesen Text, der hinzugekommen ist. Und wir sehen auch schon die Benachrichtigung "Product Metal Chair changed to watched: true". Nochmal andersrum. "Product Metal Chair changes to watched: false", und "changed to watched: false". Werfen wir nun einen Blick auf die Methode componentWillUnmount. Hier könnte man beispielsweise offene Listener beenden, oder auch sonstige Aufräumarbeiten, kurz bevor sie eine Komponente löschen. Wir lassen uns hier einfach wieder einen Wert ausgeben, um zu sehen, wo das Ganze passiert. Und wir lassen uns anzeigen, welches Produkt unmounten wird. Dazu müssen wir in die App.js blicken. Hier hatten wir nämlich einen Button hinzugefügt mit dem Click-Handler _handleRemove. Und was dieses _handleRemove tut, ist, es sieht sich die Products an, this.state.products, führt eine splice-Operation aus. Und diese splice-Operation hat zum Resultat, dass das letzte Element des Arrays gelöscht wird. Das heißt, wir würden erwarten, dass dieses leere Element wegfällt. Probieren wir das einmal aus und betrachten ganz genau, wie sich der Lebenszyklus dieser einzelnen Komponenten verhält. Wir löschen also das letzte Product. Und wir sehen "Product Metal Chair changes to watched: false". Das heißt, die componentWillUpdate-Methode wurde ausgelöst. Wir haben hier nicht wirklich ein "changed", da wir sowieso schon auf watched: false sind. Aber schonmal gut zu wissen, dass jetzt ein Update angestoßen wird. Wir drücken OK. Genau das Gleiche passiert für den Wooden Chair. Das Update wird bald ausgelöst. Jetzt sind wir beim Untitled, beim letzten Produkt. Hier sind wir tatsächlich im componentWillUnmount gelandet. Alles klar, noch ein zweiter. Jetzt sehen wir, "Product Metal Chair changed to watched: false". Das heißt, wir sind jetzt in der componentDidUpdate. Und bei "Product Wooden Chair" genau das Gleiche, "changed to watched: false". Das heißt, wir haben jetzt insgesamt gesehen, dass wir mit dem Klick auf den Button Remove last in unserer Hauptapplikation, also in der Klasse App, einen this.setState-Aufruf durchgeführt haben und damit ein erneutes Rendern unserer App angestoßen haben. Dieses App-Update hat dazu geführt, dass die render-Methode unserer App.js neu durchgeführt wurde damit inklusive dieser Zeile, welche jedes Product neu rendert, und damit ebenfalls den Update-Lebenszyklus unserer Product-Komponente ausgelöst hat. In diesem Video haben Sie erfahren, wie der React.Component-Lifecycle aussieht und mithilfe welcher Methoden Sie sich in diesen Zyklus einklinken können. Sie wissen nun, wie Sie Aktionen durchführen können, sobald das DOM geladen ist, und wie Sie Vorbereitungen wie zum Beispiel das Beenden von Listnern beim Unmounten einer Komponente durchführen können.

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!