Reagieren Sie auf den js-Lebenszyklus

Montage
Aktualisieren
aushängen

Funktionskomponente

Montage:
useEffect(() => {...}, []): Der useEffect-Hook mit einem leeren Abhängigkeitsarray wird nach dem ersten Rendern nur einmal ausgeführt, ähnlich wie bei „componentDidMount“.

Update:
useEffect(() => {...}, [Abhängigkeiten]): Wenn Sie Abhängigkeiten an useEffect übergeben, wird es immer dann ausgeführt, wenn sich eine der Abhängigkeiten (Status oder Requisiten) ändert, ähnlich wie bei „componentDidUpdate“.
useState(): Dieser Hook aktualisiert den Status und löst ein erneutes Rendern aus.
useMemo() und useCallback(): Diese Hooks helfen bei der Optimierung der Leistung während Aktualisierungen, indem sie Werte und Funktionen speichern.

Aushängen:
useEffect(() => {... return () => {...}}): Sie können eine Bereinigungsfunktion von useEffect zurückgeben, die ausgeführt wird, wenn die Bereitstellung der Komponente aufgehoben wird, ähnlich wie bei „componentWillUnmount“.

Klassenkomponente

Montage:
Konstruktor()
Initialisiert die Komponente, richtet den Status ein und bindet Methoden.

getDrivedStateFromProps()
Synchronisiert den Status mit den Requisiten vor dem Rendern. Nicht oft verwendet.

render()
Beschreibt, was gerendert werden soll (UI) und gibt JSX zurück.

componentDidMount()
Wird aufgerufen, nachdem die Komponente gemountet wurde (nützlich zum Abrufen von Daten, Einstellung
bis Abonnements).

Update:
getDrivedStateFromProps()
Synchronisiert den Status mit Requisiten vor dem Rendern (wird auch während Aktualisierungen aufgerufen).

shouldComponentUpdate()
Entscheidet, ob ein erneutes Rendern erforderlich ist (wird zur Leistungsoptimierung verwendet)

render()
Rendert die Komponente neu, wenn sich der Status oder die Requisiten ändern.

getSnapshotBeforeUpdate()
Erfasst Informationen (wie die Bildlaufposition), bevor sich das DOM ändert

componentDidUpdate()
Wird aufgerufen, nachdem die Komponente erneut gerendert wurde (nützlich für die Interaktion mit
DOM- oder Netzwerkanfragen).

Aushängen:
componentWillUnmount()
Wird aufgerufen, bevor die Komponente aus dem DOM entfernt wird (zur Bereinigung verwendet,
). wie zum Beispiel das Entfernen von Abonnements)

Fehlerbehandlung
componentDidCatch()
Fängt Fehler in untergeordneten Komponenten ab und ermöglicht die Fehlerbehandlung (React
16 ).

Das obige ist der detaillierte Inhalt vonReagieren Sie auf den js-Lebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!