Cykl życia komponentu React: montowanie i aktualizacja

Cykl życia komponentu Reacta ma trzy fazy: montowanie (komponent pojawia się na ekranie po raz pierwszy), aktualizację (renderuje się ponownie, bo zmienił się jego stan, propsy albo kontekst) i odmontowanie (zostaje usunięty). W komponentach funkcyjnych na te fazy reagujesz przez useEffect: efekt z [] uruchamia się po zamontowaniu, efekt z zależnościami po aktualizacjach, w których się zmieniły, a funkcja zwracana przez efekt przy odmontowaniu.

Konsola pod podglądem pokazuje każdą fazę w chwili, gdy następuje.

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>
    );
}

Konsola zaczyna od render, count = 0 i mounted. Każde kliknięcie Count wypisuje renderowanie i aktualizację. Unmount wypisuje unmounted; Mount again zaczyna od nowa od count = 0, bo stan został wyrzucony razem z komponentem.

Montowanie

Komponent montuje się, gdy React pierwszy raz renderuje go w danym miejscu drzewa. React wywołuje funkcję, tworzy węzły DOM z zwróconego JSX, wstawia je, pozwala przeglądarce odmalować ekran, a potem uruchamia efekty komponentu.

useEffect(fn, []) to miejsce, w którym uruchamiasz rzeczy, które mają istnieć tak długo, jak komponent jest na ekranie: subskrypcję, timer, połączenie, pierwsze żądanie danych. Uruchamia się po odmalowaniu, więc nigdy nie opóźnia pierwszej klatki.

Aktualizacja

Komponent się aktualizuje (renderuje ponownie), gdy:

• zmienia się jego własny stan,
• jego rodzic renderuje się ponownie (domyślnie każde dziecko też się renderuje, bez względu na to, czy jego propsy się zmieniły),
• zmienia się kontekst, który czyta.

Po każdej aktualizacji React uruchamia efekty, których zależności się zmieniły. Zanim ponownie uruchomi efekt, uruchamia jego poprzednią funkcję czyszczącą, więc stara subskrypcja zostaje zamknięta, zanim otworzy się nowa. Strona o renderowaniu dokładniej omawia, co wywołuje renderowanie.

Odmontowanie

Komponent się odmontowuje, gdy rodzic przestaje go renderować (jak robi to {show && <Counter />} powyżej), gdy zmienia się jego key albo gdy odmontowany zostaje sam root. React usuwa jego węzły DOM, uruchamia funkcję czyszczącą każdego efektu i wyrzuca jego stan. Jeśli komponent później znowu się pojawi, jest zupełnie nową instancją.

Rodzice i dzieci

React renderuje od góry w dół, ale efekty uruchamia od dołu w górę. Gdy rodzic i dziecko montują się razem, najpierw uruchamiają się efekty dziecka, więc efekt rodzica może polegać na tym, że jego dzieci są w pełni gotowe.

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>
    );
}

Montowanie wypisuje render Parent, render Child, Child effect, Parent effect. Naciśnij Remove, a funkcje czyszczące uruchomią się w odwrotnej kolejności: Parent cleanup, potem Child cleanup.

Fazy renderowania i zatwierdzania

Każda aktualizacja przechodzi przez dwie fazy:

1. Faza renderowania. React wywołuje twoje komponenty, żeby wyliczyć nowy JSX, i porównuje go z poprzednim wynikiem. Na ekranie nic się jeszcze nie zmienia. React może tę pracę wstrzymać, wykonać dwa razy w StrictMode albo wyrzucić, dlatego renderowanie musi być czyste: żadnych żądań, subskrypcji ani zmian zmiennych zewnętrznych.
2. Faza zatwierdzania (commit). React stosuje różnice w DOM, podłącza refy i uruchamia callbacki useLayoutEffect, wszystko zanim przeglądarka odmaluje ekran. Callbacki useEffect uruchamiają się po tym, zwykle gdy przeglądarka już odmalowała ekran. Gdy aktualizację spowodowało kliknięcie albo inne dyskretne zdarzenie wejściowe, React uruchamia je zamiast tego zaraz po efektach układu, żeby wynik był gotowy przed następnym zdarzeniem.

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>;
}

Każde kliknięcie wypisuje trzy linie w tej samej kolejności. Te efekty nie mają tablicy zależności, więc uruchamiają się po każdym renderowaniu. Dodaj [] jako drugi argument do obu, a uruchomią się tylko po pierwszym.

Metody cyklu życia klas i ich odpowiedniki w hookach

Komponenty klasowe rozpisują cykl życia na nazwane metody. Spotkasz je w starszym kodzie i w granicach błędów, które nadal wymagają klasy.

Oto klasa, która wypisuje każdą metodę w chwili jej wykonania:

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>
    );
}

Montowanie wypisuje constructor, getDerivedStateFromProps, render, componentDidMount. Kliknięcie wypisuje getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. Niech shouldComponentUpdate zwraca false, a kliknięcia przestaną aktualizować przycisk: stan się zmienia, ale React pomija renderowanie. Strona o komponentach klasowych pokazuje, jak przerobić taką klasę na funkcję.

Myśl o synchronizacji, a nie o cyklu życia

Tabela hooków przydaje się do czytania starego kodu, ale może skłonić cię do pisania efektów, które kopiują nawyki z klas, na przykład jeden duży efekt „po zamontowaniu" i jeden duży efekt „po aktualizacji". Efekt lepiej czytać jako „utrzymuj tę zewnętrzną rzecz w zgodzie z tymi wartościami": połącz się z roomId, a gdy roomId się zmieni, rozłącz się i połącz ponownie. Pisz jeden efekt na każdą rzecz, którą synchronizujesz, wymień wartości, których używa, jako zależności i pozwól Reactowi zdecydować, kiedy go uruchomić.