Cos'è Virtual DOM?

Di recente, ho esaminato il framework React di Facebook . Usa un concetto chiamato "Virtual DOM", che non ho capito bene.

Cos'è il DOM virtuale? Quali sono i vantaggi?

React crea un albero di oggetti personalizzati che rappresentano una parte del DOM. Ad esempio, invece di creare un elemento DIV effettivo contenente un elemento UL, crea un oggetto React.div che contiene un oggetto React.ul. Può manipolare questi oggetti molto rapidamente senza realmente toccare il vero DOM o passare attraverso l'API DOM. Quindi, quando esegue il rendering di un componente, utilizza questo DOM virtuale per capire cosa deve fare con il DOM reale per far corrispondere i due alberi.

Puoi pensare al DOM virtuale come a un progetto. Contiene tutti i dettagli necessari per costruire il DOM, ma poiché non richiede tutte le parti pesanti che vanno in un vero DOM, può essere creato e modificato molto più facilmente.

Facciamo un esempio, anche se molto ingenuo: se hai qualcosa incasinato in una stanza della tua casa e devi pulirlo, quale sarà il tuo primo passo? Pulirai la tua stanza che è incasinata o l'intera casa? La risposta è sicuramente che pulirai solo la stanza che richiede la pulizia. Questo è ciò che fa il DOM virtuale.

JS ordinario attraversa o esegue il rendering dell'intero DOM anziché renderizzare solo la parte che richiede modifiche.

Pertanto, ogni volta che si apportano modifiche, come se si desideri aggiungerne un altro <div>al proprio DOM, verrà creato il DOM virtuale che in realtà non esegue alcuna modifica nel DOM effettivo. Ora con questo DOM virtuale, verificherai la differenza tra questo e il tuo DOM attuale. E <div>verrà aggiunta solo la parte diversa (in questo caso il nuovo ) invece di eseguire nuovamente il rendering dell'intero DOM.

Cos'è il DOM virtuale?

Il DOM virtuale è una rappresentazione in memoria degli elementi DOM reali generati dai componenti di React prima che vengano apportate modifiche alla pagina.

È un passaggio tra la funzione di rendering chiamata e la visualizzazione di elementi sullo schermo.

Il metodo di rendering di un componente restituisce un po 'di markup, ma non è ancora l'HTML finale. È la rappresentazione in memoria di ciò che diventerà elementi reali (questo è il passaggio 1). Quindi quell'output verrà trasformato in vero HTML, che è ciò che viene visualizzato nel browser (questo è il passaggio 2).

Quindi perché passare attraverso tutto questo per generare un DOM virtuale? Risposta semplice - Questo è ciò che consente a reagire di essere veloce. Lo fa mediante il DOM virtuale. Confrontando due alberi virtuali - vecchio e nuovo - e apportando solo le modifiche necessarie al vero DOM.

Fonte da Intro To React # 2

A virtual DOM(VDOM) non è un nuovo concetto: https://github.com/Matt-Esch/virtual-dom .

VDOM è strategico per aggiornare DOM senza ridisegnare tutti i nodi in una singola applicazione di pagina. Trovare un nodo in una struttura ad albero è facile ma l'albero DOM per un'app SPA può essere enormemente enorme. Trovare e aggiornare un nodo / nodi in caso di un evento non è efficiente in termini di tempo.

VDOM risolve questo problema creando un'alta astrazione dell'etichetta del dom effettivo. VDOM è una rappresentazione ad albero in memoria leggera di alto livello dell'attuale DOM.

Ad esempio, considerare l'aggiunta di un nodo in DOM; reagire mantenere una copia di VDOM in memoria

1. Crea una VDOM con un nuovo stato
2. Confrontalo con VDOM più vecchio usando diffing.
3. Aggiorna solo nodi diversi nel DOM reale.
4. Assegna nuovo VDOM come VDOM precedente.

Questa è una breve descrizione e reiterazione del DOM virtuale spesso menzionato insieme a ReactJS.

Il DOM (Document Object Model) è un'astrazione di testo strutturato, il che significa che è fatto di codice HTML e CSS. Questi elementi HTML diventano nodi nel DOM. Esistono limiti ai metodi precedenti di manipolazione del DOM. DOM virtuale è un'astrazione del DOM HTML letterale creato ben prima che React fosse creato o utilizzato, ma per i nostri scopi lo useremo in concerto con ReactJS. Il DOM virtuale è leggero e separato dall'implementazione del DOM nel browser. Il DOM virtuale è essenzialmente uno screenshot (o una copia) del DOM in un determinato momento. Un modo di vederlo dal punto di vista degli sviluppatori è il DOM è l'ambiente di produzione e il DOM virtuale è l'ambiente locale (dev). Ogni volta che i dati cambiano in un'app React, viene creata una nuova rappresentazione DOM virtuale dell'interfaccia utente.

I metodi più basilari necessari per creare un componente statico in ReactJS sono:

È necessario restituire il codice dal metodo di rendering. È necessario convertire ogni classe in className poiché la classe è una parola riservata in JavaScript. A parte le modifiche più importanti, ci sono differenze minori tra i due DOM, inclusi tre attributi che appaiono nel DOM virtuale ma non nel DOM HTML (chiave, ref e dangerouslySetInnerHTML).

Una cosa importante da capire quando si lavora con il DOM virtuale è la differenza tra ReactElement e ReactComponent.

ReactElement

• Un ReactElement è una rappresentazione leggera, stateless, immutabile e virtuale di un elemento DOM.
• ReactElement - Questo è il tipo principale in React e risiede nel DOM virtuale.

• ReactElements può essere reso in DOM HTML

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX compila i tag HTML in ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent: i ReactComponent sono componenti con stato.
• React.createClass è considerato un ReactComponent.
• Ogni volta che lo stato cambia, il componente viene reso nuovamente.

Ogni volta che un ReactComponent ha un cambio di stato, vogliamo il minor numero possibile di modifiche al DOM HTML, quindi ReactComponent viene convertito in ReactElement che può quindi essere inserito nel DOM virtuale, confrontato e aggiornato rapidamente e facilmente.

Quando React conosce il diff, viene convertito nel codice di basso livello (DOM HTML), che viene eseguito nel DOM.

È un concetto accurato: invece di manipolare direttamente il DOM, che è soggetto a errori e si basa sullo stato mutabile, si genera invece un valore chiamato Virtual DOM. Il DOM virtuale viene quindi diffuso con lo stato corrente del DOM, che genera un elenco di operazioni DOM che renderebbero l'attuale DOM simile a quello nuovo. Tali operazioni vengono applicate rapidamente in un batch.

Tratto da qui.

DOM virtuale è un'astrazione del DOM HTML che esegue il rendering selettivo delle sottostrutture dei nodi in base alle modifiche di stato. Fa il minor numero possibile di manipolazioni DOM per mantenere aggiornati i tuoi componenti.

Virtual Dom viene creata una copia di Dom. Il dom virtuale viene confrontato con il dom e il dom virtuale aggiorna solo quella parte del dom che è cambiata. non sta eseguendo il rendering dell'intero dom, ma ha appena cambiato la parte aggiornata di dom in dom. Richiede molto tempo e da questa funzionalità, la nostra app funziona velocemente.

Tutte le risposte sono fantastiche. Ho appena escogitato un'analogia che probabilmente può dare una metafora del mondo reale.

Il vero DOM è come la tua stanza, i nodi sono i mobili della tua stanza. Il DOM virtuale è come se disegnassimo un progetto di questa stanza attuale.

Tutti abbiamo l'esperienza di spostare mobili, è molto stancante (stesso concetto dell'aggiornamento delle viste nei computer). Pertanto, ogni volta che vogliamo cambiare la posizione / aggiungere mobili (nodi), vogliamo fare solo il cambiamento molto necessario.

Il progetto è venuto per il salvataggio per raggiungerlo. Disegniamo un nuovo progetto e confrontiamo la differenza con quella originale. Questo ci consente di sapere quale parte è stata modificata e quale parte rimane la stessa. Quindi eseguiamo le modifiche necessarie nella stanza reale (aggiorniamo i nodi modificati sul DOM reale). Evviva.

(Alcuni potrebbero pensare, perché dobbiamo fare affidamento su quello virtuale e non confrontare direttamente il vero DOM? Beh, in analogia, confrontare il vero DOM significa che devi creare un altro spazio reale e confrontarlo con quello originale È troppo costoso.)

facciamo ordine e senso in questa materia. React (o qualsiasi altra libreria) sono un "layer" su javascript.

Non esiste dom virtuale, non esiste dom non collegato.

lasciami spiegare in javascript semplice:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

a questo punto abbiamo creato un Div che non è mostrato sul dom, perché non è allegato

ma possiamo accedervi, aggiungere attributi, valori, cambiare ecc.

una volta chiamato: (ad esempio, aggiungilo al corpo)

    document.body.appendChild(vDom['newDiv'])

allora lo vedremo;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)