¿Y eso del Virtual DOM de React qué es?

Una introducción al Virtual DOM de React y la forma en que optimiza el pintado de las aplicaciones

Image for post
Image for post

Seguro que si has trabajado con React o has escuchado hablar algo de esta librería te suena el término “Virtual DOM”, ya que es uno de sus principales conceptos y la razón que le permite tener un rendimiento tan alto a la hora de actualizar el DOM. Por eso, he creído muy interesante preparar un artículo explicando qué es y la forma en que trabaja. ¡Vamos allá!

Real DOM

Pero antes de nada, si hay un Virtual DOM tendrá que haber algo real, ¿no? En efecto, el DOM (cuyas siglas son “Document Object Model) es la representación de la interfaz gráfica de nuestra aplicación. Por tanto, cada vez que el estado de la aplicación cambia, lo “esperable” es que también lo haga dicha interfaz para adaptarse a las modificaciones introducidas. Sin embargo, actualizar el DOM es una tarea costosa en cuanto a rendimiento se refiere, por lo que cuantos más cambios de estado sea necesario reflejar en él, más lento irá nuestra web.

¿Y por qué es tan lento realizar esos cambios?

EL DOM posee una estructura en forma de árbol:

Image for post
Image for post

Esto provoca que cada vez que modificamos un elemento dentro de él, todos sus hijos tengan que ser pintados de nuevo (hayan o no cambiado). Y justo este proceso es el que provoca los problemas de rendimiento, ya que de por sí renderear elementos en una interfaz gráfica es una tarea costosa. Por tanto, cuantos más elementos queden por debajo de nuestro elemento modificado en la estructura del DOM más elementos tendrán que ser vueltos a pintar en la interfaz gráfica. Y es aquí donde entra el concepto del Virtual DOM con el objetivo de conseguir optimizar esta tarea.

Virtual DOM

El Virtual DOM es una representación en memoria del DOM real que actúa de intermediario entre el estado de la aplicación y el DOM de la interfaz gráfica que está viendo el usuario.

Puesto que cada elemento es un nodo en el árbol del DOM, cada vez que se produce un cambio en cualquiera de estos elementos (o un nuevo elemento es añadido) se genera un nuevo Virtual DOM con el árbol resultante. Dado que este DOM es virtual, la interfaz gráfica aún no es actualizada, sino que se compara el DOM real con este DOM virtual con el objetivo de calcular la forma más óptima de realizar las cambios (es decir, de renderear los menos cambios posibles). De este modo se consigue reducir el coste en términos de rendimiento de actualizar el DOM real.

Rebuscando en Internet he encontrado este gráfico en la web de O’Reilly donde podéis ver el proceso:

Image for post
Image for post
  1. State Change. En este primer paso, se produce un cambio en el estado del nodo de color de rojo, lo cual provoca que se genere en memoria un Virtual DOM con el árbol resultante tras ese cambio.
  2. Compute diff. A continuación se realiza la comparación entre el árbol del Virtual DOM y el del navegador (DOM real) con el fin de detectar los cambios producidos. Como veis, el cambio afecta a toda la rama descendiente del nodo cuyo estado cambió.
  3. Re-render. Finalmente, se consolida el cambio en el DOM real y la interfaz gráfica es actualizada de golpe.

¿Cómo usa React el Virtual DOM?

Como os comentaba al principio del artículo, React usa esta técnica para trasladar los cambios de estado a la interfaz gráfica.

En React, cada pieza de la UI es un componente y cada componente posee un estado interno. Este estado es observado por la librería con el fin de detectar cambios en él de modo que, cuando se produce un cambio, React actualiza el árbol de su Virtual DOM y sigue el mismo proceso para trasladar los cambios resultantes a la interfaz presentada en el navegador. Esto le permite tener un rendimiento mejor que las librerías que manipulan el DOM directamente, pues React sólo actualiza aquellos objetos en los que ha detectado cambios durante el proceso de diffing.

Además, React traslada los cambios al DOM de la interfaz gráfica de forma masiva lo cual también incrementa el rendimiento. Esto se debe a que en vez de enviar múltiples cambios, React los junta todos en uno para reducir el número de veces que la interfaz gráfica debe pintarse.

Finalmente, otra de las ventajas que nos proporciona React es la abstracción de todo el proceso de actualización del DOM que nos proporciona. Es decir, nos permite olvidarnos de actualizar los atributos o el valor de los nodos que componen nuestra interfaz gráfica ya que todo esto sucede a nivel interno.

Dicho de otro modo, como desarrolladores tan sólo tenemos que preocuparnos de decirle a React cuál es el estado de nuestra aplicación en el momento presente y él se encarga internamente de manipular el DOM para reflejarlo en la interfaz gráfica.

React y el método render()

En el caso de que estemos trabajando con un Class Component, el método render() es donde declaramos la interfaz de dicho componente.

Además, es un método perteneciente al ciclo de vida del componente que se ejecuta cada vez que el estado del componente o una prop es modificada. Si por ejemplo empleamos el método setState() para actualizar un valor dentro del estado interno del componente, React inmediatamente detecta el cambio y re-renderiza el componente empleando para ello el Virtual DOM.

Conclusiones

A continuación os dejo un resumen de todo lo tratado en el artículo:

  • Actualizar el DOM es una operación que influye negativamente en el rendimiento pues supone actualizar la interfaz gráfica.
  • El Virtual DOM es una representación en memoria del DOM asociado a la interfaz gráfica que ve el usuario.
  • Cada vez que se produce un cambio en el estado de la aplicación el Virtual DOM es actualizado para, a continuación, realizar una comparación entre esta nueva versión y la antigua del DOM real.
  • Una vez detectados los cambios, estos son enviados de golpe al DOM real para realizar una única actualización de la interfaz gráfica.
  • Así es como funciona React y lo que le permite tener este gran rendimiento.

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter:

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store