Giorno 2: Come React aggiorna l'interfaccia utente (UI)
Ieri ho imparato cosa fa React. Oggi ho imparato come lo fa.
Mi chiedevo spesso come facesse React a sapere esattamente cosa cambiare nell'interfaccia utente. Se cambi una parola in un paragrafo, React ricostruisce l'intera pagina? No. Utilizza un processo intelligente per rimanere veloce.
Ecco l'analisi del ciclo di aggiornamento di React.
Reconciliation e Diffing
La Reconciliation è la strategia. Il Diffing è il metodo effettivo. React confronta il nuovo albero del Virtual DOM con quello vecchio.
Confrontare due alberi è difficile per i computer. Un algoritmo standard sarebbe troppo lento. React rimane veloce basandosi su due presupposti:
- Se il tipo di un elemento cambia, React distrugge il vecchio albero e ne costruisce uno nuovo.
- Se il tipo rimane lo stesso, React aggiorna solo gli attributi modificati.
Questo permette a React di operare in tempo O(n). Ciò rende gli aggiornamenti istantanei.
Le due fasi
React divide il suo lavoro in due passaggi distinti:
Render Phase Questa è la fase di pianificazione. React chiama i tuoi componenti e calcola le modifiche. In questa fase non tocca il Real DOM. Immaginala come un architetto che disegna una planimetria.
Commit Phase Questa è la fase di costruzione. React applica le modifiche calcolate al Real DOM. Questa parte è sincrona. Una volta iniziata, non si ferma finché il lavoro non è completato.
Importante: React aggiorna il DOM, ma il browser dipinge i pixel. React gestisce la struttura. Il browser gestisce il rendering visivo.
React Fiber
Prima di React 16, il rendering era sincrono. Se un rendering richiedeva molto tempo, il browser si bloccava. Non era possibile scorrere la pagina o scrivere.
Fiber ha cambiato tutto. Fiber è il motore che gestisce la Render Phase. Permette a React di:
- Mettere in pausa il lavoro e riprenderlo in seguito.
- Dare priorità agli aggiornamenti urgenti, come la digitazione dell'utente, rispetto ai dati in background.
- Dividere il lavoro in piccoli blocchi.
Il Virtual DOM è la struttura dati. Fiber è l'algoritmo che opera su quei dati.
Riepilogo del flusso:
• Lo stato cambia. • Render Phase: React pianifica le modifiche tramite il Diffing. • Commit Phase: React aggiorna il Real DOM. • Browser: Layout, Paint e Composite. • I pixel appaiono sullo schermo.