React -Komponenten durchlaufen unterschiedliche Stufen in ihrem Anwendungslebenszyklus, obwohl das, was hinter den Kulissen geschieht, m?glicherweise nicht offensichtlich ist.

Diese Phasen umfassen:

• Montieren
• erneuern
• deinstallieren
• Fehlerbehandlung

Jede Stufe hat eine entsprechende Methode, bei der bestimmte Aktionen für Komponenten ausgeführt werden k?nnen. Wenn Sie beispielsweise Daten aus dem Netzwerk abrufen, m?chten Sie m?glicherweise eine Funktion aufrufen, die API -Aufrufe in componentDidMount() (in der Mount -Phase verfügbar) übernimmt.

Das Verst?ndnis verschiedener Lebenszyklusans?tze ist für die Entwicklung von React -Anwendungen von entscheidender Bedeutung, da wir bei Bedarf den Vorg?ngen genau ausl?sen k?nnen, ohne mit anderen Vorg?ngen zu verwechseln. Dieser Artikel behandelt jeden Lebenszyklus, einschlie?lich der verfügbaren Methoden und der Arten von Szenarien, die wir verwenden.

Montagephase

Stellen Sie sich die Reittiere als Anfangsphase des Lebenszyklus des Komponenten vor. Die Komponente existierte nicht, bevor die Halterung auftrat - sie blitzte gerade durch das DOM, bis die Halterung auftrat und sie als Teil des Dokuments angeschlossen hat.

Sobald die Komponente montiert ist, k?nnen wir viele Methoden nutzen: constructor() , render() , componentDidMount() und static getDerivedStateFromProps() . Jede Methode hat ihren eigenen Zweck. Lassen Sie uns einen Blick darauf werfen.

Konstruktor ()

constructor() -Methode ist erforderlich, wenn die Zust?nde direkt auf der Komponente eingestellt werden, um die Methoden miteinander zu binden. Es sieht so aus:

 // Sobald die Eingangskomponente mit der Montage beginnt ...
Konstruktor (Requisiten) {
  // ... einige Requisiten einstellen ...
  Super (Requisiten);
  // ... in diesem Fall ist es ein leerer Benutzername ...
  this.state = {
    Benutzername: ''
  };
  // ... dann binden Sie eine Methode, die die Eingangs?nderungen ver?ndert.
}

Es ist wichtig zu wissen, dass constructor die erste Methode ist, die beim Erstellen einer Komponente bezeichnet wird. Die Komponente wurde nicht wiedergegeben (in Kürze), aber der Dom wei? es bereits und wir k?nnen sie an sie anschlie?en, bevor sie sich rendert. Hier rufen wir setState() nicht an oder stellen Nebenwirkungen ein, da sich die Komponente noch in der Build -Phase befindet!

Ich habe schon einmal ein Tutorial über Refs geschrieben und eine Sache, die mir aufgefallen ist, ist, dass Sie bei der Verwendung von React.createRef() Ref in constructor einstellen k?nnen. Dies ist vernünftig, da Refs verwendet wird, um Werte ohne Requisiten zu ?ndern oder die Komponente mit aktualisierten Werten erneut zu rendern:

 Konstruktor (Requisiten) {
  Super (Requisiten);
  this.state = {
    Benutzername: ''
  };
  this.inputText = react.createRef ();
}

machen()

render() -Methode wird die Marke der Komponente am vorderen Ende angezeigt. Der Benutzer kann zu diesem Zeitpunkt sehen und darauf zugreifen. Wenn Sie jemals eine React -Komponente erstellt haben, sind Sie bereits damit vertraut - auch wenn Sie es nicht merken -, da sie Ausgabe -Tags ben?tigen.

 Die Klassen -App erweitert React.comPonent {
  // W?hrend des Mountsprozesses rendern Sie bitte den folgenden Inhalt!
  render () {
    Zurückkehren (
      <div>
        <p>Hallo Welt!</p>
      </div>
    )
  }
}

Aber das ist nicht der ganze Zweck von render() ! Es kann auch verwendet werden, um Komponenten -Arrays zu rendern:

 Die Klassen -App erweitert React.comPonent {
  render () {
    Zurückkehren [
      <h2>JavaScript -Tools</h2> Anwesend
      <frontend></frontend>Anwesend
      <backend></backend>
    ]
  }
}

Sogar Komponentenfragmente:

 Die Klassen -App erweitert React.comPonent {
  render () {
    Zurückkehren (
      <react.fragment><p>Hallo Welt!</p></react.fragment>
    )
  }
}

Wir k?nnen es auch verwenden, um Komponenten au?erhalb der DOM -Hierarchie (?hnlich wie das React -Portal) zu rendern:

 // Wir erstellen ein Portal, das es Komponenten erm?glicht, das Klassenportal zu verschieben, erweitert React.comPonent {
  // Zun?chst erstellen wir einen Div -Element -Constructor () {
    super();
    this.el = document.createelement ("div");
  }

  // Nach dem Montieren fügen wir das untergeordnete Element der Komponentenkomponentdidmount = () => {{an, {
    portalroot.appendchild (this.el);
  };

  // Wenn die Komponente aus dem DOM entfernt wird, entfernen wir auch ihre untergeordneten Elementekomponenten.
    portalroot.removechild (this.el);
  };

  // Ah, jetzt k?nnen wir die Komponente und ihre Kinderelemente rendern () nach Bedarf {
    const {Kinder} = this.Props;
    return reactdom.createportal (Kinder, this.el);
  }
}

Natürlich kann render() Zahlen und Zeichenfolgen rendern ...

 Die Klassen -App erweitert React.comPonent {
  render () {
    Rückkehr "Hallo Welt!"
  }
}

Und Null- oder Boolesche Werte:

 Die Klassen -App erweitert React.comPonent {
  render () {
    Null zurückkehren
  }
}

componentDidmount ()

Zeigt der Name componentDidMount() seine Bedeutung an? Diese Methode wird aufgerufen, nachdem die Komponente montiert ist (d. H. Mit dem DOM verbunden ist). In einem weiteren Tutorial habe ich über das Erhalten von Daten in React geschrieben. Hier m?chten Sie eine Anfrage an die API stellen, um Daten zu erhalten.

Wir k?nnen Ihre Fetch -Methode verwenden:

 fetchusers () {
  Fetch (`https: // jsonplaceholder.typicode.com/user``)
    .then (response => response.json ())
    .then (Data =>
      this.setState ({{
        Benutzer: Daten,
        Isloading: Falsch,
      })
    )
  .Catch (error => this.setState ({error, isloading: false}));
}

Rufen Sie dann die Methode im componentDidMount() -Haken auf:

 componentDidmount () {
  this.fetchusers ();
}

Wir k?nnen auch Event -H?rer hinzufügen:

 componentDidmount () {
  El.AddeventListener ()
}

Sehr pr?gnant, oder?

statische GetedivedStateFromProps ()

Dies ist ein bisschen ausführlicher Name, aber static getDerivedStateFromProps() ist nicht so kompliziert, wie es sich anh?rt. Es wird vor render() -Methode der Mountsphase und vor der Aktualisierungsphase aufgerufen. Es gibt ein Objekt zurück, um den Status der Komponente zu aktualisieren, oder null wenn kein Inhalt aktualisiert wird.

Um zu verstehen, wie es funktioniert, implementieren wir eine Z?hlerkomponente, die einen bestimmten Wert für den Z?hlerstatus festlegt. Dieser Status wird nur aktualisiert, wenn der Wert von maxCount h?her ist. maxCount wird aus der übergeordneten Komponente übergeben.

Dies ist die übergeordnete Komponente:

 Die Klassen -App erweitert React.comPonent {
  Konstruktor (Requisiten) {
    Super (Requisiten)

    this.textinput = react.createRef ();
    this.state = {
      Wert: 0
    }
  }

  HandleIncrement = e => {
    E.PreventDefault ();
    this.setState ({value: this.state.Value 1})
  };

  Handlecrement = e => {
    E.PreventDefault ();
    this.setState ({value: this.state.Value - 1})
  };

  render () {
    Zurückkehren (
      <react.fragment><p>Maximale Graf: {this.state.Value}</p>
           
          - -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    )
  }
}

Wir haben einen Knopf, um den Wert von maxCount zu erh?hen, den wir an Counter Z?hlerkomponente übergeben.

 Der Klassenz?hler erweitert React.comPonent {
  state = {
    Z?hler: 5
  }

  statische GetedivedStateFromProps (NextProps, Prevstate) {
    if (prevState.counter <nextprops.maxcount return nextprops.maxcount null zur render>
        <p>Graf: {this.state.counter}</p>

      
    )
  }
}</nextprops.maxcount>

In der Counter überprüfen wir, ob counter kleiner als maxCount ist. Wenn ja, counter wir den Wert von maxCount . Ansonsten tun wir nichts.

Aktualisieren Sie die Phase

Eine Aktualisierungsphase tritt auf, wenn sich die Requisiten oder der Zustand der Komponente ?ndert. Wie Moderationen verfügen auch Updates auch über ihre eigenen verfügbaren Methoden, die wir als n?chstes vorstellen werden. Das hei?t, es ist erw?hnenswert, dass render() und getDerivedStateFromProps() in diesem Stadium ebenfalls abfeuern wird.

SollteComponentUpdate ()

Wenn sich der Zustand oder die Requisiten der Komponenten?nderung ?ndern, k?nnen wir shouldComponentUpdate() verwenden, um zu steuern, ob die Komponente aktualisiert werden soll. Diese Methode wird vor dem Rendering aufgerufen und wenn Zustand und Requisiten empfangen. Das Standardverhalten ist true . Um jedes Mal, wenn sich der Staat oder die Requisiten ?ndern, erneut zu rendern, tun wir dies:

 SollteComponentUpdate (NextProps, NextState) {
  zurück this.state.Value! == NextState.Value;
}

Wenn false zurückgegeben wird, wird die Komponente nicht aktualisiert, sondern render() aufruft, um die Komponente anzuzeigen.

GetNaphotbeforeupdate ()

Eine Sache, die wir tun k?nnen, ist zu einem bestimmten Zeitpunkt den Zustand der Komponente zu erfassen, für die getSnapshotBeforeUpdate() ausgelegt ist. Es wird nach render() aufgerufen, aber bevor sie neue ?nderungen am DOM begangen haben. Der Rückgabewert wird als dritter Parameter an componentDidUpdate() übergeben.

Es dauert den vorherigen Zustand und die Requisiten als Parameter:

 GetNapShotbeforeupdate (PrevProps, Prevstate) {
  // ...
}

Meiner Meinung nach gibt es nur wenige Anwendungsf?lle für diesen Ansatz. Es ist eine Lebenszyklusmethode, die Sie m?glicherweise nicht h?ufig verwenden.

componentDidUpdate ()

Fügen Sie componentDidUpdate() in die Methodenliste hinzu, in der der Name ungef?hr alles sagt. Wenn die Komponente aktualisiert wird, k?nnen wir diese Methode zu diesem Zeitpunkt anschlie?en und an die früheren Requisiten und den Zustand der Komponente weitergeben.

 componentDidUpdate (prevprops, prevstate) {
  if (prevState.counter! == this.state.counter) {
    // ...
  }
}

Wenn Sie jemals getSnapshotBeforeUpdate() verwendet haben, k?nnen Sie den Rückgabewert auch als Parameter an componentDidUpdate() übergeben:

 componentDidUpdate (prevprops, prevstate, snapshot) {
  if (prevState.counter! == this.state.counter) {
    // ....
  }
}

Deinstallationsphase

Wir sehen hier fast das Gegenteil der Bergphase. Wie zu erwarten ist, tritt die Deinstallation auf, wenn die Komponente aus dem DOM gel?scht wird und nicht mehr verfügbar ist.

Wir haben hier nur eine Methode: componentWillUnmount()

Dies wird aufgerufen, bevor die Komponente deinstalliert und zerst?rt wird. Hier m?chten wir nach der Komponentenbl?tter eine notwendige Reinigung durchführen, z. B. Ereignish?rer, die m?glicherweise in componentDidMount() hinzugefügt werden oder das Abonnement gel?scht werden.

 // L?schen Sie die Event -Listener -Komponentierung () {{
  El.RemoveEventListener ()
}

Fehlerbehandlungsphase

Es kann Probleme in der Komponente geben, die Fehler verursachen k?nnen. Wir verwenden eine Weile Fehlergrenzen, um dieses Problem zu l?sen. Diese Fehlergrenzkomponente verwendet einige Methoden, um uns mit m?glichen Fehlern umzugehen.

getedivedStateFromError ()

Wir verwenden getDerivedStateFromError() um alle Fehler aus der untergeordneten Komponente zu fangen, und dann verwenden wir es, um den Status der Komponente zu aktualisieren.

 Class FehlerBoundary erweitert React.comPonent {

  Konstruktor (Requisiten) {
    Super (Requisiten);
    this.state = {
      Haserror: Falsch
    };
  }

  statische GetedivedStateFromError (Fehler) {
    return {haserror: true};
  }

  render () {
    if (this.state.hasError) {
      Zurückkehren (
        <h1>Hoppla, etwas ist schief gelaufen :(</h1>
      );
    }

    kehre this.Props.Children zurück;
  }
}

In diesem Beispiel zeigt die ErrorBoundary , wenn ein Fehler aus der untergeordneten Komponente geworfen wird, "Oh, ein Problem ist aufgetreten".

componentDidcatch ()

W?hrend getDerivedStateFromError() zum Aktualisieren des Zustands einer Komponente im Falle von Nebenwirkungen wie der Fehlerprotokollierung geeignet ist, sollten wir componentDidCatch() verwenden, da sie w?hrend der Commit -Phase aufgerufen wird. Zu diesem Zeitpunkt wurde das DOM aktualisiert.

 componentDidCatch (Fehler, info) {
  // Fehler im Dienst protokollieren}

Sowohl getDerivedStateFromError() als auch componentDidCatch() k?nnen in der ErrorBoundary verwendet werden:

 Class FehlerBoundary erweitert React.comPonent {

  Konstruktor (Requisiten) {
    Super (Requisiten);
    this.state = {
      Haserror: Falsch
    };
  }

  statische GetedivedStateFromError (Fehler) {
    return {haserror: true};
  }

  componentDidCatch (Fehler, info) {
    // Fehler im Dienst protokollieren}

  render () {
    if (this.state.hasError) {
      Zurückkehren (
        <h1>Hoppla, etwas ist schief gelaufen :(</h1>
      );
    }

    kehre this.Props.Children zurück;
  }
}

Dies ist der Lebenszyklus von React -Komponenten!

Es ist cool zu verstehen, wie React -Komponenten mit DOM interagieren. Es ist leicht zu glauben, dass einige "Magie" passieren wird, und dann wird etwas auf der Seite erscheinen. Der Lebenszyklus von React -Komponenten zeigt jedoch, dass dieser Wahnsinn ordnungsgem?? ist, und es zielt darauf ab, uns viel Kontrolle darüber zu geben, was von der Zeit geschieht, als die Komponente das DOM erreicht, bis zu dem Zeitpunkt, als sie verschwindet.

Wir decken viele Dinge in einem relativ kurzen Raum ab, aber hoffentlich gibt es Ihnen eine gute Vorstellung davon, wie React Komponenten umgeht und welche Funktionen wir in jeder Verarbeitungsphase haben. Wenn Sie nicht klar sind, was hier vorgestellt wurde, k?nnen Sie Fragen stellen und ich würde gerne mein Bestes geben, um zu helfen!

Das obige ist der detaillierte Inhalt vonDer Kreis eines Reaktivit?tslebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!