Reaktionslebenszyklus in Sekunden

Das Beherrschen des React-Lebenszyklus ist der erste Schritt zum Debuggen wie ein Profi?.

Hier ist eine einfache 3-Minuten-Anleitung, die Ihnen hilft, zu verstehen, wie alles funktioniert.

? Laden Sie mein KOSTENLOSES Buch mit 101 React-Tipps und Tricks herunter, um einen Vorsprung zu haben.

Was ist der Lebenszyklus der React-Komponente?

Eine React-Komponente ist wie ein Mensch?.

So wie wir geboren werden, uns weiterentwickeln und schließlich sterben, folgen React-Komponenten einem Lebenszyklus: Sie werden geboren, sie aktualisieren und dann sterben.

Dieser Prozess wird als Komponentenlebenszyklus bezeichnet und besteht aus drei Hauptphasen:

• Mounting (auch bekannt als Birth): React erstellt die Komponente und fügt sie dem DOM hinzu.

• Aktualisierung (auch bekannt als Evolving): Die Komponente ändert sich als Reaktion auf Zustandsänderungen.

• Unmounting (auch bekannt als Dying): React entfernt die Komponente und bereinigt Ressourcen.

Jede Phase umfasst spezifische Schritte, die React ausführt, um das Rendering zu optimieren und Ressourcen zu verwalten.

Reagieren Sie auf die Analogie des Komponentenlebenszyklus mit dem menschlichen Lebenszyklus

Warum müssen Sie den Lebenszyklus von React-Komponenten verstehen?

Das Verständnis des React-Lebenszyklus hilft Ihnen:

• Schreiben Sie bessere Effekte mit useEffect und useLayoutEffect.

• Vermeiden Sie Ineffizienzen, wie das Festlegen des Status innerhalb von useEffect.

• Verhindern Sie Speicherlecks durch Aufräumen.

• Optimieren Sie die Leistung und vermeiden Sie unnötiges erneutes Rendern.

Die drei Phasen des Lebenszyklus der React-Komponente

Zeitleiste einer Reaktionskomponente mit Hooks. Quelle: https://julesblom.com/writing/react-hook-component-timeline

1. Montage: Wenn eine Komponente zum ersten Mal gerendert wird

Die Montage erfolgt, wenn React eine Komponente zum Bildschirm hinzufügt (mountet).

Was löst das Aufsteigen aus?

• Wenn Sie root.render() aufrufen

• Wenn React eine Komponente zum JSX-Baum hinzufügt und ihr übergeordnetes Element neu rendert, um die neue Komponente einzuschließen.

Was passiert bei der Montage?

1. Rendern: React ruft die Komponentenfunktion (oder Rendermethode in Klassenkomponenten) auf, um React-Elemente zu erstellen. React initialisiert auch Hooks.

2. DOM-Knoten einfügen: React aktualisiert das echte DOM mit den neuen Elementen. Dieser Schritt erfolgt während der Commit-Phase, wenn React Änderungen am DOM anwendet.

3. DOM-Refs festlegen: Wenn Sie useRef verwenden, setzt React Referenzen auf die DOM-Knoten.

4. useLayoutEffect ausführen: React führt die useLayoutEffect-Funktionen aus. Hier vorgenommene Änderungen verursachen kein sichtbares Flackern, da die Änderung erfolgt, bevor der Benutzer visuelle Änderungen sieht (die beim Malen auftreten).

5. DOM Paint: Der Browser malt die aktualisierte Benutzeroberfläche.

6. useEffect ausführen: Schließlich führt React die useEffect-Funktionen aus.

---

2. Aktualisieren: Wenn eine Komponente erneut gerendert wird

Die Aktualisierung erfolgt, wenn React eine Komponente neu rendert, um Änderungen widerzuspiegeln.

Was löst die Aktualisierung aus?

• Ein Status-Update

• Ein aktualisierter Kontextwert

• Eine übergeordnete Komponente wird erneut gerendert (wenn die Komponente nicht gespeichert wurde)

• usw.

Was passiert während der Aktualisierung?

1. Neu rendern: React berechnet die Ausgabe der Komponente neu.

2. Abgleich: React vergleicht den neuen React-Baum mit dem vorherigen, um Änderungen festzustellen.

3. Änderungen festschreiben: React aktualisiert das DOM mit den Änderungen.

4. Unset DOM Refs: React macht ref.current ungültig und ruft non-stable Ref-Callbacks mit Null auf, wenn der referenzierte DOM-Knoten während der Aktualisierung entfernt oder ersetzt wird.

5. useLayoutEffect bereinigen: React führt Bereinigungsfunktionen aus dem vorherigen useLayoutEffect aus.

6. DOM-Refs festlegen: React legt neue Ref-Werte für die aktualisierten DOM-Elemente fest (wie in der Montagephase).

7. useLayoutEffect ausführen: Reagieren Sie auf Aufrufe von useLayoutEffect-Hooks, wie in der Montagephase (wenn sich die Abhängigkeiten gemäß Object.is geändert haben).

8. Malen Sie das DOM: Der Browser aktualisiert die Benutzeroberfläche, um Änderungen widerzuspiegeln.

9. UseEffect bereinigen: Bereinigt Funktionen aus dem vorherigen useEffect-Lauf, um Speicherlecks zu verhindern.

10. useEffect ausführen: React führt die aktualisierte useEffect-Funktion aus (wenn sich ihre Abhängigkeiten gemäß Object.is geändert haben).

    ---

3. Unmounten: Wenn React eine Komponente entfernt

Das Aufheben der Bereitstellung erfolgt, wenn React eine Komponente aus dem DOM entfernt und so Ressourcen freigibt.

Was löst das Aushängen aus?

• Die Komponente ist nicht mehr Teil des JSX-Baums

• React hebt die Bereitstellung seines übergeordneten Elements auf.

• Der Schlüssel der Komponente hat sich geändert (React wird die alte Instanz aushängen und eine neue bereitstellen.).

• usw.

Was passiert beim Aushängen?

• Bereinigungsfunktionen ausführen: React führt Bereinigungsfunktionen aus, die in useEffect und useLayoutEffect definiert sind.

• DOM-Referenzen aufheben: React macht ref.current ungültig und ruft Ref-Rückrufe mit null auf.

• DOM-Knoten entfernen: React entfernt die mit dem Element verknüpften DOM-Knoten.

Zusätzliche Ressourcen, um noch weiter zu gehen

Wenn Sie tiefer in den React-Lebenszyklus einsteigen möchten, empfehle ich diese erstaunlichen Ressourcen:

• React Docs

  • Rendern und Commit
  • Lebenszyklus reaktiver Effekte

• Zeitleiste einer Reaktionskomponente mit Hooks ❤️

• Warum React Re-Renderings

• Eine (meistens) vollständige Anleitung zum React-Rendering-Verhalten – Warnung: Dies ist ein sehr langer Artikel?

Zusammenfassung

Sobald Sie den Lebenszyklus der React-Komponente verstanden haben, sind Sie 99 % der Junior-Frontend-Entwickler voraus.

Es ist einfacher als Sie denken: nur drei Phasen – Bereitstellung, Aktualisierung und Demontage.

Beginnen Sie, diese Konzepte anhand von Beispielen aus der Praxis zu üben:

• Verwenden Sie useLayoutEffect für DOM-Messungen.

• Effekte immer bereinigen, wenn eine Komponente ausgehängt wird.

Du hast das?.

? ERKENNEN SIE DEN FEHLER

? Denkanstöße

Das ist Schluss?.

Einen Kommentar hinterlassen? um Ihren größten Imbiss zu teilen.

Und vergessen Sie nicht, ein „???“ zu hinterlassen. Wenn Sie React lernen, laden Sie mein Buch „101 React Tips & Tricks“

KOSTENLOS

herunter. Wenn Ihnen Artikel wie dieser gefallen, abonnieren Sie meinen KOSTENLOSEN Newsletter,

FrontendJoy

.

Wenn Sie tägliche Tipps wünschen, finden Sie mich auf X/Twitter oder auf Bluesky. <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>

Das obige ist der detaillierte Inhalt vonReaktionslebenszyklus in Sekunden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!