Der Lebenszyklus der React -Komponente ist in drei Stufen unterteilt: Mount, Update und Deinstallation. W?hrend der Bergphase initialisiert die Klassenkomponente den Zustand über Constructor (), Render () erzeugt JSX, und componentDidmount () führt Nebeneffektoperationen durch; Die Funktionskomponente verwendet Usestate, um den Status zu initialisieren und die Verwendung von Effect (das Abh?ngigkeitsarray ist leer), simuliert componentDidmount. W?hrend der Update -Phase regeneriert die Klassenkomponente das virtuelle DOM durch Render (), und componentDidUpdate (PrevProps, PrevState) reagiert auf ?nderungen. Die Funktionskomponente verwendet useEffect und gibt das Abh?ngigkeitsarray an, um ?nderungen des Werts zu h?ren und Rückrufe auszul?sen. W?hrend der Deinstallationsphase r?umt die Klassenkomponente Ressourcen über Komponentenreinigungen () auf. Die Funktionskomponente gibt die in UseEffect in Use Effect zurückgegebene Reinigungsfunktion zurück und wird automatisch ausgeführt. Die beiden sind auf unterschiedliche Weise geschrieben, aber die Kernideen sind gleich: Mount -Initialisierung, Aktualisierungsantwort?nderungen, deinstallieren und saubere Ressourcen.

Der Lebenszyklus einer React -Komponente kann in drei Hauptstadien unterteilt werden: Montage, Aktualisierung und Unkombination. Jede Stufe hat einen entsprechenden Hook, der in Klassenkomponentenmethoden oder Funktionskomponenten verwendet wird, um eine bestimmte Logik auszuführen.

Montagephase: Komponenten werden erstellt und in das DOM eingefügt

Dies ist der Zeitpunkt, an dem die Komponente zum ersten Mal gerendert wird, was w?hrend des Komponenteninitialisierungsprozesses auftritt.

• Klassenkomponenten :

  • constructor() : Führen Sie zun?chst aus, um Status- und Bindungsmethoden zu initialisieren.
  • render() : Muss existieren, JSX zurückgeben und festlegen, wie die Komponente angezeigt wird.
  • componentDidMount() : Die Komponente wird nach dem Einfügen des DOM aufgerufen, was für die Initiierung von Netzwerkanfragen, das Einrichten von H?ren usw. geeignet ist.

• Funktionskomponentenhaken :

  
  • Initialisieren Sie den Zustand mit useState .
  • Verwenden Sie useEffect anstelle von componentDidMount und geben Sie in einem leeren Abh?ngigkeits -Array [] an, was darauf hinweist, dass es nur einmal nach dem ersten Rendern der Komponente ausgeführt wird.

Wenn Sie beispielsweise Daten aus der API erhalten m?chten, wenn die Komponente geladen wird, k?nnen Sie sie so schreiben:

 useEffect (() => {
  fetch ('/api/data')
    .then (res => res.json ())
    .then (data => setData (data));
}, []);

Aktualisieren Sie die Phase: Komponenten-Neuaufnahme

Wenn sich die Requisiten oder Status der Komponente ?ndert, tritt sie in die Aktualisierungsphase ein. Der Hauptzweck dieser Phase besteht darin, auf Ver?nderungen zu reagieren und die Benutzeroberfl?che neu zu rendern.

• Klassenkomponenten :

  • render() : Nehmen Sie erneut aus, um ein neues virtuelles DOM zu generieren.
  • componentDidUpdate(prevProps, prevState) : Aufgerufen nach Abschluss des Updates. Es wird h?ufig verwendet, um nach ?nderungen der Requisiten oder des Zustands zu reagieren, z. B. die Synchronisierung bestimmter externer Daten.

• Funktionskomponentenhaken :

  • Verwenden Sie useEffect , um ?nderungen in bestimmten Werten anzuh?ren, und ein Rückruf wird ausgel?st, solange die Werte in der ?nderung des Abh?ngigkeitsarrays ge?ndert werden.

Sie m?chten beispielsweise Daten erneut begeben, wenn der Benutzer eine andere Kategorie ausw?hlt:

 useEffect (() => {
  if (selectedCategory) {
    fetch (`/api/items? category = $ {selectedCategory}`)
      .then (res => res.json ())
      .then (items => setItems (items));
  }
}, [SelectedCategory]);

Beachten Sie, dass die Abh?ngigkeiten hier nicht übersehen werden sollten, sonst kann der alte Wert erhalten werden.

Deinstallationsphase: Komponenten werden entfernt

Wenn die Komponente nicht mehr angezeigt werden muss, entfernt React sie aus dem DOM und kann einige Reinigungsarbeiten ausführen.

• Klassenkomponenten :

  • componentWillUnmount() : Vor der Deinstallation der Komponente aufgerufen, geeignet zum L?schen von Timern, Abbestellen, Schlie?en von Verbindungen usw.

• Funktionskomponentenhaken :

  • useEffect kann eine Reinigungsfunktion zurückgeben, die beim Entladen von Komponenten automatisch aufgerufen wird.

Zum Beispiel haben Sie der Komponente einen Ereignish?rer hinzugefügt:

 useEffect (() => {
  window.adDeVentListener ('Gr??e', Handleresize);
  return () => {
    window.removeEventListener ('Gr??e', Handleresize);
  };
}, []);

Dieses Schreiben stellt sicher, dass die Komponente ohne "Zombie" -H?rer deinstalliert wird und Speicherlecks vermeidet.

Grunds?tzlich ist das. Obwohl Klassenkomponenten und Funktionskomponenten unterschiedlich geschrieben sind, ist die Kernidee des Lebenszyklus gleich: Initialisieren Sie w?hrend des Mount, reagieren Sie auf ?nderungen w?hrend des Updates und s?ubern Sie Ressourcen w?hrend der Deinstallation. Das Verst?ndnis dieser Phasen ist sehr hilfreich für das Debuggen und Optimieren von React -Anwendungen.

Das obige ist der detaillierte Inhalt vonBeschreiben Sie die Hauptphasen des Lebenszyklus einer React -Komponente und deren entsprechenden Methoden/Haken.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!