javascript - with - virtual dom react
¿Qué es Virtual DOM? (6)
Recientemente, miré en el marco de React de Facebook. Utiliza un concepto llamado "DOM virtual", que realmente no entendí.
¿Qué es el DOM virtual? ¿Cuáles son las ventajas?
¿Cuál 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 renderización de un componente devuelve un margen de beneficio, pero todavía no es el HTML final. Es la representación en memoria de lo que se convertirá en elementos reales (este es el paso 1). Entonces 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 la reacción sea rápida. Lo hace por medio de DOM virtual que difiere. Comparando dos árboles virtuales, viejos y nuevos, y solo realiza los cambios necesarios en el DOM real.
DOM virtual es una abstracción del HTML DOM que representa selectivamente subárboles de nodos según los cambios de estado. Hace la menor cantidad de manipulación DOM posible para mantener sus componentes actualizados.
React crea un árbol de objetos personalizados que representan una parte del DOM. Por ejemplo, en lugar de crear un elemento DIV real que contiene un elemento UL, crea un objeto React.div que contiene un objeto React.ul. Puede manipular estos objetos muy rápidamente sin tocar realmente el DOM real ni pasar por la DOM API. 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 modelo. Contiene todos los detalles necesarios para construir el DOM, pero como no requiere todas las piezas 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á en mal estado o en toda la casa? La respuesta es, definitivamente, que limpiará solo la habitación que requiere la limpieza. Eso es lo que hace el DOM virtual.
JS común atraviesa o representa todo el DOM en lugar de representar solo la parte que requiere cambios.
Entonces, cuando tengas algún cambio, como cuando quieres agregar otro <div> a tu DOM, entonces se creará el DOM virtual que en realidad no hace ningún cambio en el DOM real. Ahora con este DOM virtual, verificará la diferencia entre este y su DOM actual. Y solo se agregará la parte que es diferente (en este caso, el nuevo <div> ) en lugar de volver a representar todo el DOM.
¿Cómo funciona el DOM virtual?
Imagina que tienes un objeto que modelaste alrededor de una persona. Tenía todas las propiedades relevantes que una persona podría tener, y reflejaba el estado actual de las personas. Esto es básicamente lo que React hace con el DOM.
Ahora piense si tomó ese objeto e hizo algunos cambios. Se agregó un bigote, algunos bíceps dulces y ojos de Steve Buscemi. En React-land, cuando aplicamos estos cambios, ocurren dos cosas. Primero, React ejecuta un algoritmo " diferente ", que identifica qué ha cambiado. El segundo paso es la reconciliación , donde actualiza el DOM con los resultados de diff.
La forma en que reacciona funciona, en lugar de tomar a la persona real y reconstruirla desde cero, solo cambiaría la cara y los brazos. Esto significa que si tuviera texto en una entrada y se produjera un renderizado, siempre que el nodo padre de la entrada no estuviera programado para la reconciliación, el texto no se alteraría.
Debido a que React usa un DOM falso y no uno real, también abre una nueva y divertida posibilidad. Podemos renderizar ese falso DOM en el servidor, y boom, en el lado del servidor, las vistas de React.
Un virtual DOM (VDOM) no es un concepto nuevo: https://github.com/Matt-Esch/virtual-dom .
VDOM es una actualización estratégica de DOM sin redibujar todos los nodos en una sola aplicación de página. Encontrar un nodo en la estructura de tress 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 gran abstracción de etiqueta de dom real. El VDOM es una representación en árbol de alto nivel en memoria de alto nivel de DOM real.
Por ejemplo, considere agregar un nodo en DOM; reaccionar mantener una copia de VDOM en la memoria
- Crear un VDOM con un nuevo estado
- Compárelo con VDOM anterior usando diffing.
- Actualizar solo difieren nodos en DOM real.
- Asigna un nuevo VDOM como un VDOM anterior.