Reagire e il DOM virtuale

Innanzitutto, il Domain-Object-Model (DOM) è una rappresentazione analizzata dal browser che comprende la struttura e il contenuto di un documento. È un'interfaccia di programmazione per documenti HTML o XML che consente ai programmi di modificare lo stile, il contenuto e la struttura del documento. Il DOM agisce come una struttura di dati in tempo reale e quando viene modificato riflette tale cambiamento sullo schermo.

Una pagina web è un documento che può essere visualizzato come sorgente HTML o in una finestra del browser, sebbene appaiano differenti, sono lo stesso documento. Il DOM rappresenta questo documento nel browser come oggetti e nodi e consente la manipolazione in tempo reale consentendo ai linguaggi di programmazione di accedere a questi oggetti e nodi. Senza il DOM, JavaScript non avrebbe la notazione delle pagine web e dei loro elementi e quindi nessun modo per accedere e manipolare una pagina web.

La manipolazione del DOM è fondamentale per il web moderno e interattivo. Tuttavia, è lento. Con la maggior parte dei framework JavaScript, il DOM viene aggiornato molto più spesso del necessario. Ora parliamo di DOM virtuale. Il DOM virtuale è stato reso popolare dalle persone che hanno creato React (una libreria JavaScript) ed è uno dei concetti centrali che rendono React così eccezionale.

Senza entrare troppo in profondità, React è una libreria JavaScript frontend utilizzata per creare interfacce utente web e mobili. Consente agli sviluppatori di creare componenti dell'interfaccia utente riutilizzabili, che sono funzioni o classi JavaScript che possono accettare input (ovvero proprietà o oggetti di scena) e restituire elementi React che descrivono come apparirà parte dell'interfaccia utente. Un componente React viene ridisegnato quando il suo stato interno cambia a causa dell'interazione dell'utente (es. l'utente digita in un campo di input) nel browser o se riceve oggetti di scena (es. un componente genitore ha un aggiornamento di stato che è stato passato come sostegno a un componente figlio).

In React, c'è un oggetto DOM virtuale corrispondente per ogni oggetto DOM. Gli oggetti DOM virtuali hanno tutte le stesse proprietà degli oggetti nel DOM reale, tuttavia non è in grado di modificare ciò che è sullo schermo rendendolo molto più leggero. È come gli schemi per il DOM piuttosto che per l'edificio fisico. Il DOM virtuale è una rappresentazione del DOM reale . Il DOM virtuale viene creato quando vengono aggiunti nuovi elementi all'interfaccia utente (UI).

Lo scopo di questo DOM virtuale è che quando una modifica a un trigger nel browser di un elemento esegue un re-rendering di un componente, l'intero DOM virtuale viene aggiornato, il che è molto più veloce che farlo nel DOM reale poiché nulla è effettivamente rappresentato su -schermo a questo punto. Vengono confrontate le differenze (o differenze) tra il DOM virtuale aggiornato e il DOM virtuale pre-aggiornamento e solo gli oggetti DOM virtuali con differenze vengono aggiornati nel DOM reale e rappresentati nel browser. Ciò significa che l'intera pagina Web non ha bisogno di essere ridisegnata ogni volta che si verifica una modifica, rendendo il processo molto più veloce.

Diciamo che React non ha incorporato la funzionalità del DOM virtuale: ogni volta che viene attivato un evento o vengono modificati lo stato o gli oggetti di scena di qualsiasi componente, l'intero DOM viene aggiornato. Ciò significa che tutti i dati vengono recuperati di nuovo (lentamente) e quindi l'intera pagina Web viene riprodotta (lentamente) ad ogni modifica. Grazie al web DOM virtuale e all'app nativa, gli utenti non devono attendere che l'intero albero del DOM si aggiorni ogni volta che si verifica un cambiamento nel browser.