Was sind Komponentenlebenszyklusmethoden in React JS?

Wie wir alle werden auch React-Komponenten geboren, wachsen und sterben!

(Habilelabs) (7. Dezember 2020)

Von Payal Mittal

Komponentenlebenszyklusmethoden in Reactjs
Komponentenlebenszyklusmethoden in React.js

Jede React-Klassenkomponente durchläuft eine Reihe von“ Lebenszyklusmethoden “. Grundsätzlich besteht alles in React entweder aus Komponenten oder einem Teil der Komponenten.

Diese Komponenten unterliegen einem bestimmten Lebenszyklus, fast wie bei jedem Lebewesen auf der Erde. Sie werden geboren, wachsen und sterben dann endlich. Die Phase, in der sie geboren werden, wird als Montage bezeichnet, wenn sie wachsen, als Aktualisierung bezeichnet, und die letzte Phase des Todes wird als Aufheben der Montage bezeichnet.

Dieser gesamte Prozess wird als „Komponentenlebenszyklus“ bezeichnet. Für jede dieser Phasen rendert React.js bestimmte integrierte Methoden, die als Lebenszyklusmethoden bezeichnet werden und das Verhalten von Komponenten in einer Anwendung steuern.

In diesem Blog werden wir diesen Lebenszyklus durchgehen und abrufen Informationen zu diesen Lebenszyklusmethoden –

Was sind Komponentenlebenszyklusmethoden?

Die Methoden des Komponentenlebenszyklus sind in drei verschiedene Phasen unterteilt:

  • Mounten
  • Aktualisieren
  • Aktualisieren
  • Aushängen

Der gesamte Komponentenlebenszyklus kann anhand dieser einfachen visuellen Darstellung verstanden werden –

Komponentenlebenszyklusdiagramm

Nun werden wir jede der Phasen und ihre Methoden im Detail diskutieren. Dann gehen wir weiter –

✔ Bereitstellen von Lebenszyklusmethoden

Nach Abschluss der Komponente Bei der Initialisierung beginnt die Komponentenmontage, in der die Komponente erstellt und in das DOM eingefügt wird.

Hier werden die am häufigsten verwendeten Lebenszyklusmethoden erläutert –

1. Konstruktor ()

Die constructor() wird zuerst aufgerufen, bevor die Bereitstellung beginnt, und wird im Wesentlichen verwendet, um diese beiden zu bedienen Zwecke-

  • So initialisieren Sie den lokalen Status einer Komponente
  • Binden Sie Ereignisbehandlung Methoden für eine Instanz

Anstatt setState() können Sie den Anfangszustand this.state() in der Methode constructor direkt zuweisen. So können wir unseren Status definieren:

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

Als nächstes folgt die Methode render()! Die Komponente wird im DOM bereitgestellt und auf der Benutzeroberfläche gerendert. Diese Methode wird aufgerufen, um die Attribute this.state und this.props zu untersuchen, wenn Abweichungen in den state oder props.

render ist die am häufigsten verwendete Methode in React. Wenn Sie Elemente im DOM rendern möchten, ist render() die Methode, auf die Sie sich freuen können, da Sie sie hier schreiben können.

Bei jedem Aufruf kann sie zurückkehren viele Typen, dh Zeichenfolgen, Zahlen, Arrays, Fragmente, Boolesche Werte oder null Wert-, Portal- oder React-Elemente. Einige Beispiele finden Sie hier –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Hinweis : Wenn die Methode componentShouldMount den booleschen Wert false zurückgibt, wird die Rendermethode nicht aufgerufen.

3. componentDidMount ()

Diese Methode wird unmittelbar nach dem Einfügen der Komponente in das DOM über die Methode render aufgerufen . Es wird nur einmal in einem Lebenszyklus aufgerufen.

  • Wenn Sie Abonnements einrichten möchten, ist dies ein ebenso guter Ort wie jeder andere. Sie müssen sich jedoch in componetWillUnmount() abmelden.
  • Außerdem ist es ein guter Ort, um eine Netzwerkanforderung zu instanziieren, wenn Sie Daten von einer Fernbedienung laden müssen Endpunkt.
  • Hier können Sie sogar setState() aufrufen. Obwohl dadurch erneut ein Rendering ausgelöst wird, wird zumindest der Zwischenzustand nicht angezeigt. Sie müssen jedoch vorsichtig sein, wenn Sie dies verwenden, da dies zu Leistungsproblemen führt. Tatsächlich sollten Sie den Anfangszustand in der Methode constructor() als ratsam zuweisen. Dieser Ansatz ist jedoch nützlich, wenn Sie einen DOM-Knoten messen müssen, bevor Sie etwas rendern, das von seiner Größe abhängt.

✔ Aktualisieren der Lebenszyklusmethoden

Im Gegensatz zur Montage Phase, die nur einmal beim Mounten der Komponente auftritt, die Aktualisieren-Phase kann mehrmals auftreten.

Immer wenn sich die Requisiten / der Status der Komponente, die aktualisiert werden muss, ändern, ruft ein Timer auf Damit render und componentDidupdate die Änderung bestätigen, aktualisieren und rendern können, kommt die Aktualisierungsphase ins Spiel.

1. statisch getDerivedStateFromProps ()

Dies ist die erste Methode, die in der Phase des Aktualisierungslebenszyklus aufgerufen wird. Es kann mehrmals aufgerufen werden, da es immer dann aufgerufen wird, wenn die Methode render gestartet wird. Es ist also offensichtlich, dass es sowohl während der Montage- als auch der Aktualisierungsphase aufgerufen wird.

Diese Methode ist nicht sehr verbreitet und wird in bestimmten Fällen selten verwendet, z. B. wenn sich der Status der Komponente mit Änderungen der Requisiten im Laufe der Zeit ändert. Wie der Name schon sagt, leitet er den Status von Requisiten ab.

2. shouldComponentUpdate ()

Diese Methode wird aufgerufen, wenn die Komponente neu gerendert werden soll. Hiermit wird festgelegt, ob die aktuellen Änderungen in states / props die Ausgabe der Komponente beeinflussen. Es wird nur als Mittel zur Leistungsoptimierung verwendet und teilt uns mit, ob die Komponente aktualisiert werden soll oder nicht. Dies wird durch Boolean true oder false Werte. Standardmäßig wird true zurückgegeben.

Wenn

shouldComponentUpdate() false value bedeutet, dass Sie React anweisen, dieses Update zu überspringen. Daher werden die Methoden render und componentDidUpdate nicht aufgerufen.

Funktionsweise der shouldComponentUpdate-Methode

Sie können jedoch auch unnötiges Rendern verhindern, indem Sie das integrierte

React.PureComponent Damit können Sie das neue und das alte state / props vergleichen und es ist unwahrscheinlich, dass Sie ein erforderliches Update überspringen.

3. render ()

Als nächstes kommt render. Ob es aufgerufen wird oder nicht, hängt von dem von shouldComponentUpdate zurückgegebenen Wert ab. Es wird nur ausgelöst, wenn true zurückgegeben wird.

4. getSnapshotBeforeUpdate ()

Nach dem Aufruf von render

getSnapshotBeforeUpdate kommt als nächstes. Es wird nicht häufig verwendet, ist jedoch in bestimmten Fällen sehr praktisch, z. B. wenn Sie Zugriff auf einige Informationen im DOM benötigen und diese direkt nach der Aktualisierung ändern müssen.

Mit dieser Methode kann die Komponente Erfassen Sie einige Informationen (Bildlaufhöhe) aus dem DOM, damit sie später (nach der Aktualisierung) angepasst werden können. Sie müssen jedoch verstehen, dass die hier erfasste Bildlaufhöhe die Höhe angibt, bevor auf DOM aktualisiert wurde.

Wir können prevState und prevProps als Argumente, wie hier angegeben –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Diese Methode wird sofort aufgerufen, nachdem die Komponente aktualisiert und erneut gerendert wurde. Es empfängt die Parameter prevState und prevProps als Parameter und kann auch auf den neu geänderten Status oder die Requisiten zugreifen.

Es wird dringend empfohlen, den Status innerhalb dieser Funktion niemals direkt festzulegen, da sonst render und componentDidUpdate ausgelöst werden.

Mit dieser Methode können wir den Unterschied scrollHeight zwischen dem vorherigen Wert nach der Aktualisierung berechnen.

Dies ist dort nur ein Anwendungsfall Es gibt mehrere andere wie:

👉 Abrufen von Daten vom Server

👉 Zugreifen auf die DOM-Knoten der React-Komponente

Abrufen von Details zu den Anwendungsfällen Lesen Sie die offizielle Dokumentation –

React.Component – React

Diese Seite enthält eine detaillierte API-Referenz für die React-Komponentenklasse Definition. Es wird davon ausgegangen, dass Sie mit …

reactjs.org

✔ Aushängen von Lebenszyklusmethoden

Dies ist die letzte Phase, in der eine Reaktionskomponente durchlaufen wird, in der sie vom DOM abgemeldet und zerstört wird. In dieser Phase gibt es nur eine Lebenszyklusmethode.

1. componentWillUnmount ()

componentWillUnmount Die Methode wird zuerst in der Demontagephase aufgerufen, kurz bevor die Komponente zerstört wird.Hier können Sie eine beliebige Reinigungsmethode durchführen, im Wesentlichen Netzwerkanforderungen abbrechen, Timer ungültig machen oder unerwünschte Abonnements bereinigen, die mit der Methode componentDidMount erstellt wurden.

Zusammenfassung:

Es gibt einige andere Methoden, die aufgerufen werden, falls ein Fehler von a ausgelöst wird Nachkommenkomponente, diese Methoden werden als Fehlerbehandlungs-Lebenszyklusmethoden bezeichnet. Sie finden sie hier .

Das waren alles Codierer !! Ich hoffe, dass Sie durch diesen Blog ein besseres Verständnis der Lebenszyklusmethoden der React-Komponente erhalten. Wir werden uns bald mit einem weiteren aufschlussreichen Blog bei Ihnen melden.

Bis dann viel Spaß beim Lesen !! 🙃

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.