¿Qué es el DOM virtual?

Recientemente, miré el marco React de Facebook . Utiliza un concepto llamado "DOM virtual", que realmente no entendí.

¿Qué es el DOM virtual? ¿Cuáles son las ventajas?

React crea un árbol de objetos personalizados que representan una parte del DOM. Por ejemplo, en lugar de crear un elemento DIV real que contenga un elemento UL, crea un objeto React.div que contiene un objeto React.ul. Puede manipular estos objetos muy rápidamente sin tocar el DOM real o pasar por la API DOM. Luego, cuando representa un componente, utiliza este DOM virtual para descubrir qué necesita hacer con el DOM real para que los dos árboles coincidan.

Puedes pensar en el DOM virtual como un plano. Contiene todos los detalles necesarios para construir el DOM, pero debido a que no requiere todas las partes pesadas que entran en un DOM real, se puede crear y cambiar mucho más fácilmente.

Tomemos un ejemplo, aunque muy ingenuo: si tiene algo desordenado en una habitación de su hogar y necesita limpiarlo, ¿cuál será su primer paso? ¿Va a limpiar su habitación que está desordenada o toda la casa? La respuesta es definitivamente que va a limpiar solo la habitación que requiere la limpieza. Eso es lo que hace el DOM virtual.

JS ordinario atraviesa o representa todo el DOM en lugar de representar solo la parte que requiere cambios.

Entonces, cada vez que tenga algún cambio, ya que desea agregar otro <div>a su DOM, se creará el DOM virtual que en realidad no realiza ningún cambio en el DOM real. Ahora con este DOM virtual, verificará la diferencia entre este y su DOM actual. Y solo <div>se agregará la parte que es diferente (en este caso, la nueva ) en lugar de volver a representar todo el DOM.

¿Qué es el DOM virtual?

El DOM virtual es una representación en memoria de los elementos DOM reales generados por los componentes React antes de que se realicen cambios en la página.

Es un paso que ocurre entre la función de renderización que se llama y la visualización de elementos en la pantalla.

El método de representación de un componente devuelve algunas marcas, pero aún no es el HTML final. Es la representación en memoria de lo que se convertirá en elementos reales (este es el paso 1). Luego, esa salida se transformará en HTML real, que es lo que se muestra en el navegador (este es el paso 2).

Entonces, ¿por qué pasar por todo esto para generar un DOM virtual? Respuesta simple: esto es lo que permite que reaccionar sea rápido. Lo hace mediante la diferenciación virtual del DOM. Comparando dos árboles virtuales, antiguo y nuevo, y realice solo los cambios necesarios en el DOM real.

Fuente de la introducción para reaccionar # 2

A virtual DOM(VDOM) no es un concepto nuevo: https://github.com/Matt-Esch/virtual-dom .

VDOM es estratégicamente para actualizar DOM sin volver a dibujar todos los nodos en una sola aplicación de página. Encontrar un nodo en una estructura de árbol es fácil, pero el árbol DOM para una aplicación SPA puede ser drásticamente enorme. Encontrar y actualizar un nodo / nodos en caso de un evento no es eficiente en el tiempo.

VDOM resuelve este problema creando una abstracción de etiqueta alta de dom real. El VDOM es una representación de árbol en memoria ligera de alto nivel del DOM real.

Por ejemplo, considere agregar un nodo en DOM; reaccionar, mantener una copia de VDOM en la memoria

1. Crea un VDOM con un nuevo estado
2. Compárelo con VDOM anterior usando diffing.
3. Actualice solo nodos diferentes en DOM real.
4. Asigne un nuevo VDOM como un VDOM anterior.

Esta es una breve descripción y reiteración del DOM virtual mencionado a menudo junto con ReactJS.

El DOM (Modelo de objeto de documento) es una abstracción de texto estructurado, lo que significa que está hecho de código HTML y CSS. Estos elementos HTML se convierten en nodos en el DOM. Existen limitaciones a los métodos anteriores de manipulación del DOM. El DOM virtual es una abstracción del DOM HTML literal creado mucho antes de que se creara o utilizara React, pero para nuestros propósitos lo usaremos en conjunto con ReactJS. El DOM virtual es ligero y está separado de la implementación del DOM en el navegador. El DOM virtual es esencialmente una captura de pantalla (o copia) del DOM en un momento dado. Una forma de verlo desde la perspectiva de los desarrolladores es que el DOM es el entorno de producción y el DOM virtual es el entorno local (dev). Cada vez que los datos cambian en una aplicación React, se crea una nueva representación DOM virtual de la interfaz de usuario.

Los métodos más básicos necesarios para crear un componente estático en ReactJS son:

Debe devolver el código del método de representación. Debe convertir cada clase a className ya que la clase es una palabra reservada en JavaScript. Además de los cambios más importantes, existen diferencias menores entre los dos DOM, incluidos tres atributos que aparecen en el DOM virtual pero no en el DOM HTML (key, ref y dangerouslySetInnerHTML).

Una cosa importante para entender cuando se trabaja con el DOM virtual es la diferencia entre ReactElement y ReactComponent.

ReactElement

• Un ReactElement es una representación virtual, sin estado, inmutable y ligera de un elemento DOM.
• ReactElement: este es el tipo principal en React y reside en el DOM virtual.

• ReactElements se puede representar en HTML DOM

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

• JSX compila etiquetas HTML en ReactElements

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

ReactComponent

• ReactComponent: los ReactComponent son componentes con estado.
• React.createClass se considera un ReactComponent.
• Cada vez que el estado cambia, el componente se vuelve a procesar.

Siempre que un ReactComponent tenga un cambio de estado, queremos el menor cambio posible en el DOM HTML para que ReactComponent se convierta en ReactElement, que luego puede insertarse en el DOM virtual, compararse y actualizarse rápida y fácilmente.

Cuando React conoce la diferencia, se convierte al código de bajo nivel (HTML DOM), que se ejecuta en el DOM.

Es un concepto ordenado: en lugar de manipular el DOM directamente, que es propenso a errores y se basa en un estado mutable, en su lugar, genera un valor llamado DOM virtual. El DOM virtual se difunde luego con el estado actual del DOM, lo que genera una lista de operaciones DOM que harían que el DOM actual se parezca al nuevo. Esas operaciones se aplican rápidamente en un lote.

Tomado de aquí.

El DOM virtual es una abstracción del DOM HTML que representa selectivamente subárboles de nodos en función de los cambios de estado. Hace la menor cantidad de manipulación DOM posible para mantener sus componentes actualizados.

Dom virtual se crea una copia de Dom. Dom virtual se compara con dom, y el dom virtual actualiza solo esa parte en dom que cambió. no está representando todo el dom, solo ha cambiado la parte actualizada de dom en dom. Lleva mucho tiempo y, gracias a esta funcionalidad, nuestra aplicación funciona rápidamente.

Todas las respuestas son geniales. Se me ocurrió una analogía que probablemente pueda dar una metáfora del mundo real.

El DOM real es como tu habitación, los nodos son los muebles de tu habitación. El DOM virtual es como si dibujáramos un plano de esta sala actual.

Todos tenemos la experiencia de mover muebles, es muy agotador (el mismo concepto que actualizar las vistas en las computadoras). Por lo tanto, siempre que queramos cambiar la posición / agregar muebles (nodos), solo queremos hacer el cambio muy necesario.

Blueprint vino por el rescate para lograrlo. Dibujamos un nuevo plano y comparamos la diferencia con el original. Esto nos permite saber qué parte ha cambiado y qué parte permanece igual. Luego hacemos el cambio necesario a la sala real (actualizar los nodos modificados en el DOM real). Viva.

(Algunos podrían pensar, ¿por qué tenemos que confiar en el virtual y no comparar directamente el DOM real? Bueno, en la analogía, comparar el DOM real significa que tienes que crear otra habitación real y compararla con la original Es demasiado costoso).

Hagamos orden y sentido en este asunto. React (o cualquier otra biblioteca) son una "capa" en javascript.

No hay tal cosa como dom virtual, hay dom no conectado.

déjame explicarte en JavaScript simple:

 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;

en este punto hemos creado un Div que no se muestra en el dom, porque no se ha adjuntado

pero podemos acceder a él, agregar atributos, valores, cambiar, etc.

una vez que llamamos: (por ejemplo, agrégalo al cuerpo)

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

entonces lo veremos;

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