Aus dem Kurs: React Grundkurs

Lifecycle (didMount, didUpdate, willUnmount) – Tutorial zu React.js

Aus dem Kurs: React Grundkurs

Gratismonat starten Für Ihr Team erwerben

Lifecycle (didMount, didUpdate, willUnmount)

“

Render führt dazu, dass im Browser ein finales Ergebnis angezeigt wird. Wir haben auch gesehen, dass Änderungen im State dazu führen, dass dieses Ergebnis geupdatet wird. Das ist Teil des React-Lifecycles, denn wir uns nun näher anschauen, um ein besseres Verständnis zu bekommen. Dabei lernen wir auch die Lifecycle-Methoden componentDidUpdate(), shouldComponentUpdate() und componentWillUnmount() kennen. Beim Mounten einer Component wird render das erste Mal aufgerufen. Dann wird componentDidMount aufgerufen, was Ihnen die Möglichkeit gibt, bspw. Timer zu setzen oder Daten von einem Server zu laden. Wenn dann ein Update erfolgt, so wird die render-Methode erneut aufgerufen, um den neuen Zustand darzustellen. Ein solches Update kann durch mehrere Dinge getriggert werden. Ganz offensichtlich sind dabei Änderungen am state bspw. mit setState oder auch veränderte übergebene props-Parameter von außen. Weiterhin könnten bspw. erzwungene Updates ein solches Update und damit auch render antriggern. Ist ein solches Update und damit auch das rerendern erfolgt, so wird componentDidUpdate aufgerufen. Den automatischen Updatevorgang können wir kontrollieren mithilfe der Methode shouldComponentUpdate. Wenn diese false zurückgibt, wird React davon absehen, die Komponente neu zu rendern. Sie ruft also die render-Methode dann nicht auf. Die Methode componentWillUnmount ruft React dann auf, wenn die Komponente entfernt wird. Diese Methode ist insbesondere für Aufräumarbeiten sinnvoll, bspw. wenn man innerhalb von componentDidUpdate oder componentDidMount globale Eventlistener gesetzt hat, die man nun wieder entfernen möchte. Wir gehen nun zurück zu unserer countdown-App-Component und schauen uns dort die neuen Lifecycle-Methoden an. In unserem countdown habe ich den Initialwert auf 10 gesetzt. Wenn ich den Code nun anpasse und den Wert auf 5 setze, so bekomme ich eine Fehlermeldung. Durch die Veränderungen wurde die Komponente nämlich geunmountet und neu gemountet. Es wurde ein neues Intervall erzeugt und das alte Intervall versucht auf eine alte getState-Funktion zuzugreifen, während das neue problemlos funktioniert. Wir müssen also sicherstellen, dass beim Unmounten aufgeräumt wird. Dazu speichern wir beim Erzeugen des Intervalls eine Referenz, this.myIntervall = setIntervall(). Mit componentWillUnmount können wir dann sicherstellen, dass dieses Intervall aufgeräumt wird. Wir schreiben clearIntervall und übergeben die Referenz myInterval. Wenn wir das nun speichern und neu laden und dann etwas verändern, dann sehen wir kein Problem mehr. Ein neues Intervall wurde erzeugt und das alte wurde beim Unmounten aufgeräumt. Mit componentDidUpdate können wir beobachten, wie sich die Werte verändern. Die Methode bekommt dabei immer die alten props und den alten state übergeben, denn die neuen Werte finden Sie ja in der component selbst. Wenn wir also console.log(prevProps, prevState) machen, dann speichern und das Ganze neu laden, so sehen wir, dass bei jedem state-Change componentDidUpdate aufgerufen wird. Wir sehen aber auch, dass componentDidUpdate immer weiter aufgerufen wird. Das liegt daran, dass das Intervall unendlich lange läuft. Was wir machen könnten, wäre bspw. das Intervall beenden, sobald 0 erreicht wird. Alternativ könnten wir aber auch Gebrauch machen von shouldComponentUpdate. Dazu aktivieren wir shouldComponentUpdate und schauen, ob der aktuelle Wert schon 0 ist. if (this.state.counterValue) === 0, dann return false. Ansonsten soll die Komponente wie gewohnt updaten. Wir speichern, laden neu und schauen, was passiert. Nachdem 0 erreicht wurde, gibt es kein weiteres Update mehr. Wenn Sie sich fragen, warum counterValue === 0 hier nicht auftaucht, dann liegt das daran, dass componentDidUpdate ja immer den vorherigen Wert bekommt. 0 ist aber im aktuellen Wert. Da nach 0 kein weiteres Update mehr durchgeführt wird, gibt es auch nie 0 als vorherigen Wert. Obwohl das einwandfrei funktioniert, so wäre es dennoch stets die bessere Lösung, das Intervall aufzuräumen, denn ich komplexeren Komponenten mit mehreren state-Values würden Sie so natürlich auch alle anderen Werte vom Update ausschließen. Sie fragen sich nun vielleicht, zu was Sie componentDidUpdate gebrauchen könnten. Ein Beispiel wäre, wenn Sie einen Börsenticker bauen und sich dabei die Aktienwerte verändern. Wenn Sie dann die Differenz nehmen, können Sie anzeigen, ob die letzte Änderung nach oben oder nach unten ging. Das wäre vor allem dann hilfreich, wenn die Veränderung von außen kommt und Sie das Ganze mit prevProps anstatt mit prevState abbilden. Nun wissen Sie, wie der React-Lifecycle funktioniert und wie Sie entsprechende Lifecycle-Methoden sinnvoll einsetzen können.

Inhalt