Einführung in React, Folge 4: Der Komponenten-Lebenszyklus
Komponenten in React durchlaufen einen komplexen Lebenszyklus, der es ermöglicht, das Verhalten einer Komponente zu verschiedenen Zeitpunkten detailliert zu steuern. Wie funktioniert das, und worauf gilt es dabei zu achten?
- Golo Roden
Komponenten in React durchlaufen einen komplexen Lebenszyklus, der es ermöglicht, das Verhalten einer Komponente zu verschiedenen Zeitpunkten detailliert zu steuern. Wie funktioniert das, und worauf gilt es dabei zu achten?
Eine Komponente in React kennt verschiedene zeitbezogene Zustände, in denen sie sich befinden kann. Der Zugriff auf diese Zustände ist mithilfe der sogenannten Lifecycle-Methoden möglich, deren bekannteste die render-Funktion selbst ist.
Einführung in React
- Folge 1: Erste Schritte
- Folge 1.1: Release von React 16
- Folge 2: Ein tieferer Einblick
- Folge 3: Eingaben verarbeiten
- Folge 4: Der Komponenten-Lebenszyklus
Folgen und Kurse zu weiteren Themen finden sich in der tech:lounge von the native web.
Die einzelnen Funktionen erfüllen verschiedene Aufgaben. So ist componentDidMount beispielsweise die geeignete Stelle, um eine Verbindung zwischen React und dem DOM herzustellen. Das kann zum Beispiel zum Ausführen von Animationen hilfreich sein. Andere wiederum, wie shouldComponentUpdate, ermöglichen, gezielt zu steuern, wann eine Komponente neu gerendert werden darf, und können auf dem Weg zur Steigerung der Performance der React-Anwendung genutzt werden.
Welche Methoden es gibt, wie sie zusammenhängen, welchen Zweck sie jeweils erfüllen und worauf es dabei zu achten gilt, zeigt das folgende Video:
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier eine Vimeo-Video (Vimeo LLC) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Vimeo LLC) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
tl;dr: Die Lifecycle-Methoden von React ermöglichen die gezielte Kontrolle über das Verhalten einer Komponente zu verschiedenen Zeitpunkten. Wer React mit anderen Bibliotheken integrieren oder direkt auf das DOM zugreifen muss, kommt um sie nicht herum. ()
