Dzień 2: Jak React aktualizuje interfejs użytkownika (UI)

Wczoraj dowiedziałem się, co robi React. Dzisiaj dowiedziałem się, jak to robi.

Zastanawiałem się kiedyś, skąd React wie dokładnie, co zmienić w UI. Jeśli zmienisz jedno słowo w akapicie, czy React przebudowuje całą stronę? Nie. Używa inteligentnego procesu, aby zachować szybkość.

Oto szczegółowy opis cyklu aktualizacji React.

Reconciliation i Diffing

Reconciliation to strategia. Diffing to właściwa metoda. React porównuje nowe drzewo Virtual DOM ze starym.

Porównywanie dwóch drzew jest trudne dla komputerów. Standardowy algorytm jest zbyt wolny. React zachowuje szybkość, przyjmując dwa założenia:

  • Jeśli typ elementu ulega zmianie, React niszczy stare drzewo i buduje nowe.
  • Jeśli typ pozostaje ten sam, React aktualizuje tylko zmienione atrybuty.

Pozwala to Reactowi działać w czasie O(n). Dzięki temu aktualizacje wydają się natychmiastowe.

Dwie fazy

React dzieli swoją pracę na dwa odrębne kroki:

  1. Render Phase To etap planowania. React wywołuje Twoje komponenty i oblicza zmiany. Na tym etapie nie dotyka Real DOM. Możesz to sobie wyobrazić jako architekta rysującego projekt.

  2. Commit Phase To etap budowy. React nakłada obliczone zmiany na Real DOM. Ta część jest synchroniczna. Gdy się rozpocznie, nie zatrzyma się, dopóki praca nie zostanie wykonana.

Ważne: React aktualizuje DOM, ale to przeglądarka maluje piksele. React odpowiada za strukturę. Przeglądarka odpowiada za renderowanie wizualne.

React Fiber

Przed React 16 renderowanie było synchroniczne. Jeśli renderowanie trwało długo, przeglądarka zamarzała. Nie można było przewijać ani pisać.

Fiber to zmienił. Fiber to silnik, który zarządza Render Phase. Pozwala on Reactowi na:

  • Wstrzymanie pracy i powrót do niej później.
  • Nadawanie priorytetu pilnym aktualizacjom, takim jak pisanie użytkownika, nad danymi w tle.
  • Dzielenie pracy na małe fragmenty.

Virtual DOM to struktura danych. Fiber to algorytm, który operuje na tych danych.

Podsumowanie przepływu:

• Zmiana stanu (State). • Render Phase: React planuje zmiany poprzez Diffing. • Commit Phase: React aktualizuje Real DOM. • Przeglądarka: Layout, Paint i Composite. • Piksele pojawiają się na ekranie.

Źródło: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f