Lebenszyklus von Reaktionskomponenten: Was Sie wissen müssen [2022]
Veröffentlicht: 2021-01-06In React wird die Anwendung in die kleinstmöglichen Teile unterteilt, die als Komponenten bezeichnet werden. Komponenten können Präsentations- oder Container-Komponenten sein.
Wenn wir über Präsentationskomponenten sprechen, haben sie keine Logik. Sie sind in die Komponenten eingebettet; Es hat nur die Benutzeroberfläche.
Containerkomponenten sind diejenigen, die Präsentationskomponenten verwenden und über eine Geschäftslogik in der Komponente verfügen. Solche Komponenten müssen häufig lokale Zustandsobjekte behalten, um einen der vielen Anwendungsfälle zu erreichen, für die sie möglicherweise verantwortlich sind. Diese Komponenten verwenden Präsentationskomponenten als untergeordnete Komponenten und geben Daten unter Verwendung verschiedener Props weiter.
React ermöglicht es Ihnen, entweder Klassen- oder Funktionskomponenten zu haben. Ein vorherrschendes Muster, das im Reaktionsökosystem verwendet wird, besteht darin, dass die Präsentationskomponente ein funktionaler Komponententyp und Containerkomponenten ein Klassentyp sind.
Der React-Lebenszyklus zeigt den genauen Prozess, den Komponenten durchlaufen, und den Grund für den React-Komponenten-Lebenszyklus .
Inhaltsverzeichnis
Funktionale Komponenten
Dies sind diejenigen, die keinen Zustand haben, und es werden nur Manipulationen unter Verwendung der Requisiten durchgeführt.
Alle Methoden des Komponentenlebenszyklus oder setState können innerhalb solcher Komponenten nicht verwendet oder aufgerufen werden.
Checkout: Projektideen reagieren
Klassenkomponenten
Diese Komponenten können einen lokalen Zustand haben und sie haben Zugriff auf Lebenszyklusmethoden und setState .
Eine typische Klassenkomponente in React sieht so aus: 
Der Komponentenlebenszyklus hat drei Phasen:-
- Montage
- Aktualisierung
- Demontage
Montage
Wenn eine Komponente erstellt und in DOM (Document Object Model) eingefügt wird, werden folgende Methoden verwendet:
● Konstruktor()
● statisches getDerivedStateFromProps()
● rendern()
● KomponenteDidMount()
Aktualisierung
Wenn die einer Komponente zugeführte Requisite oder der Zustand geändert wird, wird das erneute Rendern der Komponente auch als Aktualisierungsphase bezeichnet. In dieser Phase werden unten die folgenden Lebenszyklusmethoden aufgerufen, die aufgerufen werden:
● statisches getDerivedStateFromProps()
● shouldComponentUpdate()
● rendern()
● getSnapshotBeforeUpdate()
● KomponenteDidUpdate()
Lesen Sie: Vue vs React: Unterschied zwischen Vue und React
Demontage
Diese Methode wird während des Unmountens einer beliebigen Komponente aufgerufen:
● Komponente willUnmount()
Es ist die letzte Funktion, die aufgerufen wird, bevor das Dokumentobjektmodell zerstört wird. Es dient als Aufräumarbeiten für alle Elemente, die während componentWillMount erstellt wurden.
Für die Fehlerbehandlung in der Komponente sind einige Methoden reserviert: -
● statisch getDerivedStateFromError()
● KomponenteDidCatch()
Häufig verwendete Lebenszyklusmethoden im Detail erklärt:-
● Konstruktor (Requisiten)
Diese Lebenszyklusmethode wird während der Montagephase von Komponenten verwendet. Hier kann ein lokales Zustandsobjekt deklariert werden. super(props) wird innerhalb des Konstruktors vor jeder anderen Anweisung aufgerufen; andernfalls tritt beim Zugriff auf this.props ein Fehler auf.
Wenn man nicht darauf abzielt, das lokale Zustandsobjekt zu deklarieren oder den Ereignishandler an die Instanz zu binden, besteht keine Notwendigkeit, die Lebenszyklusmethode der Komponenten zu schreiben.
Der Aufrufstatus in constructor() wird nicht empfohlen, da er ein erneutes Rendern auslösen würde, bevor der vorherige Zyklus beendet ist.
Constructor() ist die einzige Stelle, an der man den Zustand direkt zuweisen kann. Andernfalls sollte this.setSate verwendet werden , wenn der Status geändert oder etwas darin zugewiesen werden muss.
● rendern()
Innerhalb dieser Methodenkomponenten ist der JSX-Teil geschrieben. JSX ähnelt HTML, ist jedoch eine erweiterte Syntax von Javascript. Wenn wir JSX verwenden, können wir auch Javascript-Ausdrücke innerhalb der Render-Methode verwenden.
Die render()-Methode einer übergeordneten Komponente kann untergeordnete Komponenten enthalten. Alle folgen dem Zusammensetzungsmuster, das die Basis der Reaktionskomponenten ist.
Immer wenn die Rendermethode des Elternteils aufgerufen wird, beginnt das Rendern auch für die Kindkomponenten, und das Elternrendering ist erst abgeschlossen, nachdem das gesamte Kindrendering abgeschlossen ist.
Die render-Methode ist eine erforderliche Methode; Ohne dies kann die Komponente nicht erstellt werden, da dies der einzige Ort ist, an dem der Ansichtsteil einer Komponente geschrieben werden kann.
Die Rendermethode ist rein; Dies bedeutet, dass der darin enthaltene Zustand nicht geändert werden kann.
Für jede Komponente in der Aktualisierungsphase, ob das erneute Rendern für eine bestimmte Komponente erfolgt oder nicht, hängt möglicherweise vom Rückgabetyp oder der Verwendung der shouldComponentUpdate()- Lebenszyklusmethode ab.
API-Aufrufe und Interaktionen mit dem Browser innerhalb dieser Methode werden nicht empfohlen, und es wird ein Fehler ausgegeben.
● KomponenteDidMount()
Diese Methode wird unmittelbar nach dem Einhängen der Komponente aufgerufen. Jetzt steht DOM für weitere Manipulationen zur Verfügung. Innerhalb dieser Methode kann setState aufgerufen werden.
Auch die Interaktion mit Browser- oder API-Aufrufen kann von hier aus erfolgen.
Diese Methode wird nur einmal aufgerufen, nämlich während der Erstellungszeit. Die Methode wird in keinem weiteren Neurenderteil ausgeführt, und die darin enthaltene Logik wird ebenfalls nicht ausgeführt.
● KomponenteDidUpdate()
Dies ist dasselbe wie die KomponenteDidMount.; man kann eine Fehlermeldung erhalten, mit dem einzigen Unterschied, dass dies nur aufgerufen wird, wenn eine Komponente erneut gerendert wird. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.
Der setState und Nebeneffekte können innerhalb dieser Methode ausgeführt werden. Aber der setState muss in eine Bedingung eingeschlossen werden; Andernfalls könnte man in der Render-Endlosschleife landen, und das Rendern würde nie enden.
Auch wird componentDidUpdate nicht aufgerufen, wenn shouldComponentUpdate() false zurückgibt.
● KomponenteWillUnmount()
Diese Methode wird aufgerufen, wenn die Unmount-Phase einer Komponente läuft.
Innerhalb der Methode können im Idealfall Ereignishandler entfernt und Speicher bereinigt werden.
Die Funktion setState() sollte darin nicht aufgerufen werden, da sie das erneute Rendern einer Komponente bewirkt.
● shouldComponentUpdate()
Bei der Entwicklung von Reaktionsanwendungen gibt es oft Fälle, in denen unnötiges erneutes Rendern von Komponenten vermieden werden muss. Um diese In-Class-Komponente zu erreichen, hat man die oben erwähnte Methode. Wenn diese Methode „false“ zurückgibt, wird die Komponente und ihre untergeordneten Komponenten nicht erneut gerendert.
Die vorherigen Requisiten können überprüft und mit neu bereitgestellten Requisiten verglichen werden, um sicherzustellen, dass keine Änderungen vorgenommen wurden, und dann falsch zurückgegeben werden.
Das Aufrufen der Methode setState() darin wird nicht empfohlen, da dies erneut zu einem erneuten Rendern führen würde.
Außerdem sollten bei dieser Methode keine Nebenwirkungen auftreten.
Es gibt auch eine andere Alternative zu dieser Methode. Man kann React.pureComponents verwenden, während man die Klasse erweitert. Dies ist viel stabiler und zuverlässiger als das shouldComponentUpdate().
Nicht zuletzt gibt es Fehlergrenzen, eine Art Reaktionskomponenten, die vorhanden sind, um die Fehler abzufangen.
Man muss die Komponente einfach mit der Fehlergrenzenkomponente umhüllen.
Innerhalb dieser speziellen Komponente werden zwei Lebenszyklusmethoden verwendet:-
- statisch getDerivedStateFromError()
- KomponenteDidCatch()
Beide werden aufgerufen, wenn eine untergeordnete Komponente einen Fehler auslöst.
Der erste wird während der Renderphase aufgerufen, daher sind darin keine Nebeneffekte zulässig. Der zweite wird während der Commit-Phase aufgerufen, sodass Seiteneffekte darin zulässig sind.
Lesen Sie auch: ReactJS-Entwicklergehalt in Indien
Lernen Sie Software-Engineering-Kurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.
Fazit
Der Lebenszyklus der React-Komponente erhöht die Komplexität des Codes, aber die systematische Ausführung und Manipulation, die durch die Methoden erfolgt, erscheint aus der Perspektive des Entwicklers recht ansprechend. Der React-Lebenszyklus ermöglicht es, die Komponenten umzustrukturieren oder zu manipulieren.
Wenn Sie mehr über React, Full-Stack-Entwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen und mehr als 9 Projekte bietet und Aufgaben, IIIT-B-Alumni-Status, praktische praktische Schlusssteinprojekte und Arbeitsunterstützung bei Top-Unternehmen.
