Der Kreis eines Reaktivitätslebenszyklus

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 id="JavaScript-Tools">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 id="Hoppla-etwas-ist-schief-gelaufen">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 id="Hoppla-etwas-ist-schief-gelaufen">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!