En React el Virtual DOM aumenta en gran medida la eficiencia de carga de nuestras aplicaciones web, pero… ¿qué es exactamente el Virtual DOM?
¿Qué es el DOM?
Antes de explicarte que es el Virtual DOM, primero necesitas saber que es el DOM.
El DOM (Document Object Model) es esencialmente un modelo o representación gráfica del documento de nuestra aplicación web creado por el navegador, sobre el cual éste aplica los cambios necesarios en cada actualización de estado o evento.
El DOM posee una estructura de diagrama de árbol, al cambiar algún elemento o nodo, todos su elementos o nodos «hijos» serán renderizados nuevamente, hayan sido modificados o no.
Actualizar el DOM puede ser costoso desde el punto de vista del rendimiento, pues mientras más elementos hijos tenga un elemento a modificar, más elementos hijos serán modificados, esto puede ser un problema para aplicaciones muy complejas, especialmente si son cargadas en equipos con bajo rendimiento.
¿Qué es el el Virtual DOM?
El Virtual DOM es una representación del DOM guardada en memoria, que actúa de intermediario entre los estados de la aplicación y los estados del DOM (vistos por el usuario). Cuando ocurre un cambio en la aplicación web, el virtual DOM interpreta dichos cambios y calcula la manera más eficiente de actualizar el DOM para que renderice la menor cantidad de cambios posibles.
En resumen, en cada actualización de la aplicación el proceso sigue los siguientes pasos:
- Cambio de Estado: Se produce un cambio en el estado de algún nodo o elemento, lo que genera un Virtual DOM.
- Cómputo de Cambios: React compara la diferencia entre el estado del Virtual DOM y el DOM del navegador y detecta los cambios producidos.
- Re-render: Se definen los cambios en el DOM y la interfaz es actualizada.
Ventajas del Virtual DOM
Todo el proceso de carga, actualización y especialmente de renderizado del DOM puede llegar a consumir muchos recursos de procesamiento del lado del cliente en aplicaciones grandes, ya que en cada actualización el DOM renderizará cualquier elemento sobre el que se hayan aplicado cambios junto con TODOS sus nodos o elementos descendientes, sin importar si estos cambios son relevantes para cada nodo.
La ventaja principal de utilizar un Virtual DOM como intermediario es que éste nos permite interceptar cambios a la interfaz, calcular qué cambios en el DOM son realmente necesarios, aplicarlos -en lo posible- solamente sobre aquellos nodos donde sean relevantes y, finalmente, enviar los cambios optimizados al DOM para la fase de renderizado, ahorrando recursos de procesamiento y brindando una experiencia de usuario más fluida en nuestras aplicaciones web.
Puedes aprender más sobre éste y otros temas en nuestro Curso básico de React.
Material relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
