React UI aktualizacja: fazy render i commit

Proces aktualizacji interfejsu w React: od wyzwalacza po zatwierdzenie

React aktualizuje interfejs według ścisłego schematu: wyzwalacz → render → commit. Faza renderowania oblicza nowe stan wirtualnego drzewa bez dotykania DOM, a faza commit zapisuje zmiany synchronicznie. To podzielenie umożliwia optymalizację wydajności, szczególnie w trybie współbieżnym, gdzie renderowanie może być przerwane zgodnie z priorytetem.

Faza renderowania: rekoncyliacja i drzewo Fiber

Faza renderowania buduje drzewo work-in-progress na podstawie bieżącego drzewa Fiber. Fiber to lista powiązana reprezentująca drzewo komponentów. Każdy węzeł zawiera referencję alternate do poprzedniej wersji, co ułatwia porównanie.

Rekoncyliacja porównuje nowe elementy React (z JSX) z poprzednimi. Stabilne klucze (key) zapewniają dokładne dopasowanie i minimalizują niepotrzebne aktualizacje.

Faza dzieli się na beginWork (od góry do dołu) i completeWork (od dołu do góry):

• beginWork: sprawdza potrzebę renderowania (przerwanie przy braku zmian), wywołuje funkcję render, ustawia flagi (Placement, Update, Deletion), rekursywnie przetwarza dzieci.
• completeWork: kończy przetwarzanie węzła po przetworzeniu potomków, agreguje flagi subtree dla optymalizacji commitu.

Flagi subtree przekazują informacje o zmianach do korzenia, pomijając czyste gałęzie w procesie commitu.

| Flag | Opis |

|------|------|

| Placement | Wstawienie węzła DOM |

| Update | Zmiana atrybutów lub tekstu |

| Deletion | Usunięcie elementu |

| Ref | Obsługa ref |

| Layout | Planowanie useLayoutEffect |

| Passive | Planowanie useEffect |

Flagi są planowane w fazie renderowania, ale wykonane w fazie commit.

Faza commit: modyfikacja DOM

Commit jest synchroniczny i atomowy, dzieli się na trzy podfazy:

• beforeMutation: wywołuje getSnapshotBeforeUpdate (dla klas), czyści stare referencje ref.
• mutation: stosuje flagi — wstawia, aktualizuje lub usuwa węzły DOM.
• layout: uruchamia componentDidMount/Update, useLayoutEffect synchronicznie, aktualizuje ref, planuje useEffect.

Po zakończeniu layoutu przeglądarka przejmuje kontrolę: przeliczanie stylów → układ → rysowanie → kompozycja. React nie ingeruje w te etapy.

Przepływ przeglądarki po zatwierdzeniu

useEffect działa asynchronicznie, wykonując się po rysowaniu, ale dla zdarzeń dyskretnych (click, keydown, input) — czasem przed rysowaniu, aby zachować płynność.

Zdarzenia dyskretne:

• click, keydown, input, submit.

Zdarzenia ciągłe (scroll, mousemove) — zawsze po rysowaniu.

Tryb współbieżny: renderowanie przerwane

W trybie współbieżnym renderowanie dzieli się na jednostki pracy z priorytetami. Wyższy priorytet (np. wpisywanie tekstu) może przerwać niższy (poprzedni render), odrzucając drzewo work-in-progress.

Commit pozostaje niezmieniony: synchroniczny, jeden na aktualizację. Zapewnia to spójność DOM.

Render może uruchomić się wielokrotnie bez commitu, jeśli zmiany zostaną zignorowane (bailout).

Co warto pamiętać

• Render oblicza zmiany w pamięci, DOM modyfikowany jest tylko w commit, gdy istnieją flagi.
• beginWork/completeWork optymalizują przeszukiwanie dzięki bailout i flagom subtree.
• useLayoutEffect jest synchroniczny po modyfikacji DOM, useEffect — asynchroniczny po rysowaniu.
• Tryb współbieżny pozwala przerwać renderowanie, ale commit pozostaje niepodzielny.
• Stabilne klucze (key) są kluczowe dla skutecznej rekoncyliacji.

— Editorial Team