React UI aktualizace: render a commit fáze

Proces aktualizace uživatelského rozhraní v Reactu: od spuštění po potvrzení

React aktualizuje uživatelské rozhraní podle přesného postupu: spuštění → vykreslení → potvrzení. Fáze vykreslení vypočítává nový stav virtuálního stromu bez doteku DOM, zatímco fáze potvrzení aplikuje změny synchronně. Toto rozdělení umožňuje optimalizovat výkon, zejména v režimu concurrent, kde se vykreslování může přerušit podle priority.

Fáze vykreslení: reconciliace a Fiber-strom

Fáze vykreslení vytváří pracovní strom na základě aktuálního Fiber. Fiber je spojový seznam uzlů představujících komponentový strom. Každý uzel obsahuje odkaz alternate na předchozí verzi pro porovnání (diff).

Reconciliace porovnává nové Reactové prvky (z JSX) s těmi staršími. Stabilní klíče zajišťují přesné mapování a minimalizují nepotřebné aktualizace.

Tato fáze se dělí na beginWork (shora dolů) a completeWork (zdola nahoru):

• beginWork: ověřuje nutnost vykreslení (bailout při žádném rozdílu), volá renderovací funkci, nastavuje příznaky (Placement, Update, Deletion), rekurzivně prochází potomky.
• completeWork: dokončí uzel po zpracování potomků, agreguje příznaky podstromu pro optimalizaci potvrzení.

Příznaky podstromu přenáší informace o změnách ke kořenu a přeskakuje čisté větve během potvrzení.

| Příznak | Popis |

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

| Placement | Vložení DOM uzlu |

| Update | Změna atributů nebo textu |

| Deletion | Odstranění prvku |

| Ref | Zpracování ref |

| Layout | Plánování useLayoutEffect |

| Passive | Plánování useEffect |

Příznaky jsou plánovány během vykreslování, ale prováděny během potvrzení.

Fáze potvrzení: mutace DOM

Potvrzení je synchronní a atomické, rozdělené do tří podfází:

• beforeMutation: volá getSnapshotBeforeUpdate (pro třídy), čistí staré ref.
• mutation: aplikuje příznaky – vkládá, aktualizuje nebo odstraňuje DOM uzly.
• layout: spouští componentDidMount/Update, useLayoutEffect synchronně, aktualizuje ref a plánuje useEffect.

Po fázi layout přebírá řízení prohlížeč: přepočet stylů → layout/reflow → kreslení → kompozice. React tyto kroky neovlivňuje.

Prohlížečový pipeline po potvrzení

useEffect je asynchronní a spouští se po kreslení, ale pro diskretní události (kliknutí, stisknutí klávesy, vstup) může být spuštěn i před kreslením pro lepší reakčnost.

Diskrétní události:

• kliknutí, stisknutí klávesy, vstup, odeslání formuláře.

Nepřetržité (scroll, pohyb myší) – vždy po kreslení.

Režim concurrent: přerušované vykreslování

V režimu concurrent je vykreslování rozděleno na jednotky práce s prioritami. Vysokoprioritní aktualizace (např. zadávání textu) mohou přerušit nízkoprioritní (předchozí vykreslení), přičemž pracovní strom je zahoděn.

Potvrzení zůstává nezměněno: synchronní, jedno na aktualizaci. To zachovává konzistenci DOM.

Vykreslování může spustit vícekrát bez potvrzení, pokud změny přejdou do bailoutu.

Co je důležité

• Vyrenderování vypočítá změny v paměti; DOM se mění pouze v potvrzení, pokud existují příznaky.
• BeginWork/completeWork optimalizují průchod prostřednictvím bailoutu a příznaků podstromu.
• useLayoutEffect je synchronní po mutaci, useEffect je asynchronní po kreslení.
• Concurrent umožňuje přerušení vykreslování, ale potvrzení je nedělitelné.
• Stabilní klíče jsou kritické pro efektivní reconciliaci.

— Editorial Team