So verstehen Sie die Lebenszyklusmethoden einer Komponente in ReactJS

In diesem Artikel werden wir die Lebenszyklusmethoden von ReactJS untersuchen. Bevor wir jedoch zu den verschiedenen Lebenszyklusmethoden von React übergehen, sollten wir verstehen, was es ist.

Wie wir wissen, folgt alles auf dieser Welt einem Zyklus (sagen wir Menschen oder Bäume). Wir werden geboren, wachsen und sterben dann. Fast alles folgt diesem Zyklus in seinem Leben, und React-Komponenten auch. Komponenten werden erstellt (im DOM bereitgestellt), wachsen durch Aktualisierung und sterben dann ab (im DOM nicht bereitgestellt). Dies wird als Komponentenlebenszyklus bezeichnet.

Es gibt verschiedene Lebenszyklusmethoden, die React in verschiedenen Lebensphasen einer Komponente bereitstellt. React ruft automatisch die verantwortliche Methode entsprechend der Phase auf, in der sich die Komponente befindet. Diese Methoden geben uns eine bessere Kontrolle über unsere Komponente und wir können sie mit diesen Methoden manipulieren.

Derzeit wissen wir, was Lebenszyklusmethoden sind und warum sie wichtig sind. Was sind diese verschiedenen Methoden? Werfen wir einen Blick darauf.

Lebenszyklusmethoden

Der Lebenszyklus einer Komponente ist grob in vier Teile unterteilt:

  • Initialisierung
  • Montage
  • Aktualisierung und
  • Abmontage .

Lassen Sie uns die verschiedenen Lebenszyklusmethoden diskutieren, die in diesen verschiedenen Phasen verfügbar sind (z. B. Initialisierung, Einhängen, Aktualisieren und Aufheben der Bereitstellung).

Initialisierung

Dies ist die Phase, in der die Komponente ihre Reise beginnen wird, indem der Status (siehe unten) und die Requisiten eingerichtet werden. Dies erfolgt normalerweise innerhalb der Konstruktormethode (siehe unten, um die Initialisierungsphase besser zu verstehen).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Montage

Der Name ist selbsterklärend. Das Mounten ist die Phase, in der unsere React-Komponente auf dem DOM montiert wird (dh erstellt und in das DOM eingefügt wird).

Diese Phase tritt nach Abschluss der Initialisierungsphase auf. In dieser Phase wird unsere Komponente zum ersten Mal gerendert. Die in dieser Phase verfügbaren Methoden sind:

1. componentWillMount ()

Diese Methode wird aufgerufen, kurz bevor eine Komponente im DOM bereitgestellt wird oder die Rendermethode aufgerufen wird. Nach dieser Methode wird die Komponente gemountet.

Hinweis: Sie sollten mit this.setstate in dieser Methode keine API-Aufrufe oder Datenänderungen vornehmen, da diese vor der Rendermethode aufgerufen werden. Mit dem DOM (dh Aktualisieren der Daten mit API-Antwort) kann also nichts unternommen werden, da es nicht bereitgestellt wurde. Daher können wir den Status nicht mit der API-Antwort aktualisieren.

2. componentDidMount ()

Diese Methode wird aufgerufen, nachdem die Komponente im DOM bereitgestellt wurde. Wie componentWillMount wird es einmal in einem Lebenszyklus aufgerufen. Vor der Ausführung dieser Methode wird die Rendermethode aufgerufen (dh wir können auf das DOM zugreifen). Wir können API-Aufrufe durchführen und den Status mit der API-Antwort aktualisieren.

Schauen Sie sich diese Montagemethoden an:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Aktualisierung

Dies ist die dritte Phase, die unsere Komponente durchläuft. Nach der Montagephase, in der die Komponente erstellt wurde, kommt die Aktualisierungsphase in die Szene. Hier ändert sich der Status der Komponente und daher findet ein erneutes Rendern statt.

In dieser Phase werden die Daten der Komponente (Status & Requisiten) als Reaktion auf Benutzerereignisse wie Klicken, Tippen usw. aktualisiert. Dies führt zum erneuten Rendern der Komponente. Die in dieser Phase verfügbaren Methoden sind:

  1. shouldComponentUpdate ()

Diese Methode bestimmt, ob die Komponente aktualisiert werden soll oder nicht. Standardmäßig wird true zurückgegeben. Wenn Sie die Komponente jedoch unter bestimmten Bedingungen erneut rendern möchten, ist die Methode shouldComponentUpdate der richtige Ort.

Angenommen, Sie möchten Ihre Komponente nur dann neu rendern, wenn sich die Requisite ändert, und dann die Leistung dieser Methode nutzen. Es erhält Argumente wie nextProps und nextState, die uns bei der Entscheidung helfen, ob wir erneut rendern möchten, indem wir einen Vergleich mit dem aktuellen Prop-Wert durchführen.

2. componentWillUpdate ()

Wie andere Methoden ist auch der Name selbsterklärend. Es wird aufgerufen, bevor das erneute Rendern der Komponente erfolgt. Es wird einmal nach der Methode ' shouldComponentUpdate ' aufgerufen . Wenn Sie vor dem erneuten Rendern der Komponente und nach dem Aktualisieren des Status und der Requisite eine Berechnung durchführen möchten, ist dies der beste Ort, um dies zu tun. Wie die Methode 'shouldComponentUpdate' erhält sie auch Argumente wie nextProps und nextState.

3. ComponentDidUpdate ()

Diese Methode wird unmittelbar nach dem erneuten Rendern der Komponente aufgerufen. Nachdem die neue (aktualisierte) Komponente im DOM aktualisiert wurde, wird die Methode ' componentDidUpdate ' ausgeführt. Diese Methode empfängt Argumente wie prevProps und prevState.

Schauen Sie sich die Aktualisierungsmethoden besser an:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Aussteigen

Dies ist die letzte Phase im Lebenszyklus der Komponente. Wie der Name schon sagt, wird die Komponente in dieser Phase vom DOM abgemeldet. Die in dieser Phase verfügbare Methode ist:

1. componentWillUnmount ()

Diese Methode wird aufgerufen, bevor die Bereitstellung der Komponente aufgehoben wird. Vor dem Entfernen der Komponente aus dem DOM wird ' componentWillUnMount' ausgeführt. Diese Methode bezeichnet das Ende des Lebenszyklus der Komponente.

Hier ist ein Flussdiagramm der Lebenszyklusmethoden:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!