DOM virtual y reaccionar

Comencemos con la definición en reactjs.org

El DOM virtual (VDOM) es un concepto de programación en el que una representación ideal o "virtual" de una interfaz de usuario se mantiene en la memoria y se sincroniza con el DOM "real" mediante una biblioteca como ReactDOM. Este proceso se llama reconciliación.

Esa fue una gran definición, tratemos de entenderla.

Virtual DOM es un concepto implementado por bibliotecas sobre la API del navegador. Cada vez que se realiza un cambio en el navegador, JS atraviesa todo el DOM en lugar de representar solo la parte que requiere cambios. Lo cual lleva mucho tiempo y es costoso.

En palabras simples, suponga que el motor de su automóvil necesita una reparación, por lo que reparará el motor en lugar de reparar todo el automóvil. Lo mismo ocurre con el DOM virtual, en lugar de renderizar todo el DOM, solo se renderiza el elemento donde se realiza el cambio.

React usa Diff Algorithm para comparar los cambios entre el nuevo árbol y el árbol más reciente (el árbol aquí no es más que los cambios realizados, que es el VDOM nuevo y el VDOM más reciente). Este proceso de comparación se llama Reconciliación.

React analiza el árbol usando la búsqueda Breadth-first (BFS).

Siempre tenga en cuenta que Virtual DOM no existe físicamente, es una representación en memoria o un modelo de Real DOM.

Tomemos otro ejemplo: está creando un formulario que consta de dos campos de entrada. Ahora debe agregar otro campo de entrada, cuando agrega el tercer campo de entrada, se crea VDOM con sus cambios y el DOM real no se ve afectado. Ahora ocurre la comparación entre VDOM y DOM real y los cambios se realizan solo en el div donde sea necesario.

¿Por qué DOM virtual? Simple, esto es lo que hace reaccionar rápido. Lo hace mediante la diferenciación DOM virtual. Comparando dos árboles virtuales antiguos y nuevos, haga solo los cambios necesarios en el DOM real.

No se confunda porque VDOM es desarrollado por React js, VDOM es un concepto que está siendo utilizado por React js. El DOM virtual es esencialmente una captura de pantalla del DOM en un momento dado. Cada vez que se realiza un cambio, el componente se vuelve a renderizar creando un nuevo VDOM.

Virtual DOM ha ganado popularidad porque hace que su aplicación sea rápida y elimina la representación innecesaria de toda la página. Lo que ahorra tiempo y dinero.

Espero que hayas disfrutado el artículo y lo hayas encontrado útil. Si me he perdido algo, por favor hágamelo saber en la sección de comentarios.