React Lifecycle einer Komponente: Mount, Update, Unmount

Der Lifecycle einer React-Komponente hat drei Phasen: Mounten (die Komponente erscheint zum ersten Mal auf dem Bildschirm), Aktualisieren (sie rendert erneut, weil sich ihr State, ihre Props oder ihr Context geändert haben) und Unmounten (sie wird entfernt). In Funktionskomponenten reagierst du mit useEffect auf diese Phasen: Ein Effekt mit [] läuft nach dem Mounten, ein Effekt mit Abhängigkeiten läuft nach Updates, in denen sie sich geändert haben, und die Funktion, die ein Effekt zurückgibt, läuft beim Unmounten.

Die Konsole unter der Vorschau zeigt jede Phase, während sie passiert.

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

Die Konsole beginnt mit render, count = 0 und mounted. Jeder Klick auf Count loggt einen Render und ein Update. Unmount loggt unmounted; erneutes Mount beginnt wieder bei count = 0, weil der State mit der Komponente verworfen wurde.

Mounten

Eine Komponente wird gemountet, wenn React sie zum ersten Mal an einer bestimmten Stelle im Baum rendert. React ruft die Funktion auf, erzeugt aus dem zurückgegebenen JSX die DOM-Knoten, fügt sie ein, lässt den Browser zeichnen und führt dann die Effekte der Komponente aus.

useEffect(fn, []) ist der Ort, an dem du Dinge startest, die existieren sollen, solange die Komponente auf dem Bildschirm ist: ein Abonnement, einen Timer, eine Verbindung, eine erste Datenanfrage. Er läuft nach dem Zeichnen, verzögert also nie den ersten Frame.

Aktualisieren

Eine Komponente aktualisiert sich (rendert erneut), wenn:

• sich ihr eigener State ändert,
• ihr Elternteil erneut rendert (standardmäßig rendert dann jedes Kind mit, ob sich seine Props geändert haben oder nicht),
• sich ein Context ändert, den sie liest.

Nach jedem Update führt React die Effekte aus, deren Abhängigkeiten sich geändert haben. Bevor ein Effekt erneut läuft, führt React das vorherige Cleanup dieses Effekts aus, also wird das alte Abonnement geschlossen, bevor das neue öffnet. Die Seite zum Rendern behandelt genauer, was einen Render auslöst.

Unmounten

Eine Komponente wird unmountet, wenn ihr Elternteil sie nicht mehr rendert (wie {show && <Counter />} oben), wenn sich ihr key ändert oder wenn der Root selbst unmountet wird. React entfernt ihre DOM-Knoten, führt das Cleanup jedes Effekts aus und verwirft ihren State. Wenn die Komponente später wieder erscheint, ist sie eine brandneue Instanz.

Eltern und Kinder

React rendert von oben nach unten, führt Effekte aber von unten nach oben aus. Wenn ein Elternteil und ein Kind gemeinsam gemountet werden, laufen die Effekte des Kindes zuerst, also kann sich der Effekt eines Elternteils darauf verlassen, dass seine Kinder vollständig eingerichtet sind.

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

Das Mounten loggt render Parent, render Child, Child effect, Parent effect. Drück Remove, und die Cleanups laufen andersherum: Parent cleanup, dann Child cleanup.

Render- und Commit-Phase

Jedes Update durchläuft zwei Phasen:

1. Render-Phase. React ruft deine Komponenten auf, um das neue JSX zu berechnen, und vergleicht es mit dem vorherigen Ergebnis. Auf dem Bildschirm ändert sich noch nichts. React kann diese Arbeit pausieren, im StrictMode zweimal ausführen oder verwerfen, deshalb muss das Rendern pur sein: keine Anfragen, keine Abonnements, keine Änderungen an äußeren Variablen.
2. Commit-Phase. React wendet die Unterschiede auf das DOM an, hängt Refs an und führt die Callbacks von useLayoutEffect aus, alles bevor der Browser zeichnet. Die Callbacks von useEffect laufen danach, meist nachdem der Browser gezeichnet hat. Wenn ein Klick oder eine andere diskrete Eingabe das Update ausgelöst hat, führt React sie stattdessen direkt nach den Layout-Effekten aus, damit das Ergebnis vor dem nächsten Event bereit ist.

import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

Jeder Klick loggt die drei Zeilen in derselben Reihenfolge. Diese Effekte haben kein Abhängigkeitsarray, also laufen sie nach jedem Render. Gib beiden [] als zweites Argument, und sie laufen nur nach dem ersten.

Lifecycle-Methoden von Klassen und ihre Hook-Gegenstücke

Klassenkomponenten schreiben den Lifecycle als benannte Methoden aus. Du begegnest ihnen in älterem Code und in Error Boundaries, die weiterhin eine Klasse brauchen.

Hier ist eine Klasse, die jede Methode loggt, während sie läuft:

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

Das Mounten loggt constructor, getDerivedStateFromProps, render, componentDidMount. Ein Klick loggt getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. Lass shouldComponentUpdate false zurückgeben, und Klicks aktualisieren den Button nicht mehr: Der State ändert sich, aber React überspringt den Render. Die Seite zu Klassenkomponenten zeigt, wie du eine solche Klasse in eine Funktion umwandelst.

In Synchronisation denken, nicht in Lifecycle

Die Hook-Tabelle ist nützlich, um alten Code zu lesen, kann dich aber dazu verleiten, Effekte zu schreiben, die Gewohnheiten aus Klassen kopieren, etwa einen großen Effekt für „did mount“ und einen großen für „did update“. Ein Effekt liest sich besser als „halte dieses äußere Ding synchron mit diesen Werten“: verbinde dich mit roomId, und wenn sich roomId ändert, trenne und verbinde neu. Schreib einen Effekt pro Ding, das du synchronisierst, führe die Werte, die er nutzt, als Abhängigkeiten auf und lass React entscheiden, wann er läuft.