DOM virtual, algoritmo de reconciliación y diferenciación explicado de forma sencilla

También puede consultar mi video de YouTube para comprender con animaciones sobre el DOM virtual que se adjunta al final de la publicación.

Para aprender DOM virtual, también debe tener una idea básica sobre el DOM.

¿Qué es DOM?

DOM significa Modelo de objeto de documento. Es la representación jerárquica de su página web (UI). Por ejemplo, tiene un sitio web de blog, por lo que la representación jerárquica del sitio web sería la siguiente.

Así es como el navegador representa su página web. Esto se llama DOM.

Si ya existía DOM, ¿por qué se implementó el concepto de DOM virtual? Porque la manipulación de DOM es muy lenta. Considere el ejemplo del sitio web de blogs y en cualquiera de las publicaciones de blog, si un usuario modifica un comentario, entonces todo el DOM (IU) debe volver a pintarse debido a ese pequeño cambio. Este cambio es muy costoso en términos de complejidad de tiempo.

Para resolver este problema, aquí viene nuestro héroe Virtual DOM.

¿Qué es el DOM virtual?

En palabras simples, el DOM virtual es solo una copia del DOM original guardado en la memoria y sincronizado con el DOM real mediante bibliotecas como ReactDOM. Este proceso se llama Reconciliación.

Virtual DOM tiene las mismas propiedades que Real DOM, pero carece del poder de cambiar directamente el contenido de la pantalla.

Piense en Virtual DOM como el modelo de una máquina, los cambios realizados en el modelo no se reflejan en la máquina en sí.

¿Cómo funciona el DOM virtual?

Entonces, cuando hay una actualización en el DOM virtual, react compara el DOM virtual con una instantánea del DOM virtual tomada justo antes de la actualización del DOM virtual.

Con la ayuda de esta comparación, React determina qué componentes de la interfaz de usuario deben actualizarse. Este proceso se llama diferenciación. El algoritmo que se utiliza para el proceso de diferenciación se denomina algoritmo de diferenciación.

Una vez que React sabe qué componentes se han actualizado, reemplaza los nodos DOM originales con el nodo DOM actualizado.

Entendamos esto con un ejemplo.

DOM inicial

 <section> < div > <h1>Hello React</h1> </ div > <div> < h1 > Hello React 2 </ h1 > < /div> </ section>

DOM actualizado

 <section> < div > <h1>Hello React</h1> </ div > <div> < h1 > Hello React 5 </ h1 > < /div> </ section>

Ahora aquí, cuando hay una actualización en la interfaz de usuario, react compara el nuevo DOM virtual con el DOM virtual actualizado previamente y señala que en el segundo <div> el contenido se ha cambiado, por lo que solo actualiza el contenido del segundo div en el DOM real.

Este proceso es rápido ya que solo tuvo que cambiar un solo nodo en lugar de volver a pintar toda la interfaz de usuario.

Pero espera, ¿y si se agregan los elementos DOM?

 <section> < div > <h1>Hello React</h1> </ div > <div> < h1 > Hello React 5 </ h1 > <h2>Hello React 17 <h2> </ div > < /section>

En este escenario, solo se ha agregado un nodo al segundo div, por lo que React simplemente lo agrega al DOM real.

Pero espere aquí, el elemento se agregó al final del elemento div.

¿Qué pasa si añadimos un elemento en la parte superior?

 <section> < div > <h1>Hello React</h1> </ div > <div> < h2 > Hello React 17 <h2> <h1>Hello React 5</h1> </div> </ section >

aquí, el DOM virtual volvería a pintar todo el segundo div como cuando intenta compararlo con el DOM virtual actualizado previamente, luego en el segundo div, el primer elemento secundario era h1 y ahora es h2, por lo que no solo agrega el nuevo elemento en su lugar. reemplaza todo el elemento div.

Imagine que en lugar de solo los dos elementos dentro de la segunda etiqueta div, tenemos miles de componentes jerárquicos. Volverá a renderizar esos miles de componentes que no cambiaron.

Para resolver este problema, React admite un atributo clave. Cuando los elementos secundarios de los componentes de React tienen claves, React usa las claves para hacer coincidir los elementos secundarios en el DOM virtual actualizado previamente.

Usemos estas teclas en nuestro ejemplo anterior y veamos cómo resuelve nuestro problema.

 <section> < div > <h1 key="as231">Hello React</h1> </ div > <div> < h2 key = "12dsa" > Hello React 17 <h2> <h1 key="asddda">Hello React 5</h1> </div> </ section >

Aquí ahora, el algoritmo de diferenciación de reacción coincide con el componente con la clave anterior asdda en el segundo div y un nuevo elemento con la clave 12dsa. Entonces, en este escenario, reaccionar solo marca el nuevo elemento y se agrega al DOM real. Esto resuelve nuestro problema de volver a renderizar innecesariamente los componentes sin cambios.

Asegúrese de los siguientes puntos cuando use claves: las claves React deben ser diferentes en los componentes hermanos, no globalmente. También puede pasar el índice de matriz como clave. También puede pasar la identificación recibida de la base de datos.

¿Ahora sabes qué hace que React sea tan rápido? Es el uso de DOM virtual lo que evita que se vuelva a pintar el DOM lo menos posible.

RESUMEN

Las manipulaciones frecuentes de DOM son costosas.

Virtual DOM es una representación virtual de DOM en la memoria.

El DOM virtual se sincroniza con el DOM real con la biblioteca ReactDOM. Este proceso se llama Reconciliación.

React compara el DOM virtual y el DOM virtual actualizado previamente y solo marca el subárbol de componentes que se actualizan. Este proceso se llama diferenciación.

El algoritmo detrás de la diferenciación se llama algoritmo de diferenciación. React usa claves para evitar re-renderizaciones innecesarias.

Mire mi video de Youtube para obtener una explicación más detallada.

También publicado en https://dev.to/koolkishan/what-is-virtual-dom-how-virtual-dom-works-what-is-reconciliation-what-is-diffing-algorithm-what-makes-react-so -rápido-327a