DOM virtuale e Reagire

Iniziamo con la definizione in reactjs.org

Il DOM virtuale (VDOM) è un concetto di programmazione in cui una rappresentazione ideale, o "virtuale", di un'interfaccia utente viene conservata in memoria e sincronizzata con il DOM "reale" da una libreria come ReactDOM. Questo processo è chiamato riconciliazione.

Era una definizione infernale, proviamo a capirla.

Virtual DOM è un concetto implementato dalle librerie sopra l'API del browser. Ogni volta che viene apportata una modifica nel browser, JS attraversa l'intero DOM invece di eseguire il rendering solo della parte che richiede modifiche. Che richiede tempo e denaro.

In parole povere, supponiamo che il motore della tua auto abbia bisogno di una riparazione, quindi farai riparare il motore piuttosto che riparare l'intera macchina. Lo stesso è con il DOM virtuale, invece di eseguire il rendering dell'intero DOM, viene visualizzato solo l'elemento in cui viene apportata la modifica.

React utilizza l'algoritmo Diff per confrontare le modifiche tra il nuovo albero e l'albero più recente (l'albero qui non è altro che riferito alle modifiche apportate che sono il nuovo VDOM e il VDOM più recente). Questo processo di confronto è chiamato Riconciliazione.

React analizza l'albero utilizzando la ricerca in ampiezza (BFS).

Tieni sempre a mente che il Virtual DOM non esiste fisicamente, è una rappresentazione in memoria o un progetto di Real DOM.

Facciamo un altro esempio: stai costruendo un modulo composto da due campi di input. Ora devi aggiungere un altro campo di input, quando aggiungi il terzo campo di input viene creato VDOM con le tue modifiche e il vero DOM rimane inalterato. Ora il confronto tra VDOM e DOM reale avviene e le modifiche vengono apportate solo nel div dove richiesto.

Perché DOM virtuale? Semplice, questo è ciò che fa reagire velocemente. Lo fa tramite la differenza DOM virtuale. Confrontando due alberi virtuali vecchi e nuovi, apporta solo le modifiche necessarie nel vero DOM.

Non confonderti con il fatto che VDOM è sviluppato da React js, VDOM è un concetto utilizzato da React js. Il DOM virtuale è essenzialmente uno screenshot del DOM in un dato momento. Ogni volta che viene apportata una modifica, il componente viene renderizzato nuovamente creando un nuovo VDOM.

Il DOM virtuale ha guadagnato popolarità perché rende veloce la tua applicazione e rimuove il rendering non necessario dell'intera pagina. Ciò consente di risparmiare tempo e denaro.

Spero che l'articolo ti sia piaciuto e l'abbia trovato utile. Se ho perso qualcosa per favore fatemelo sapere nella sezione commenti.