Virtual DOM

En HTML el DOM (Document Object Model) es el árbol de elementos que toda página web tiene. En el desarrollo web es común trabajar creando, modificando o borrando elementos del DOM (utilizando jQuery por ejemplo).

Actualizar el DOM es una de las operaciones mas costosas del lado del cliente, pero es necesario para poder responder a las interacciones del usuario, o a las respuestas a llamadas a una API por ejemplo.

En React el DOM es manejado internamente, y nosotros sólo tenemos que actualizar Componentes. React es luego el encargado de interpretar qué elementos del DOM fueron modificados, para actualizar sólo esos elementos. Para esto utiliza algo llamado Virtual DOM, propio de React, que es una copia del DOM pero mucho más liviana y rápida.

Virtual DOM

Esta es una de las grandes ventajas de React. Lo hacen muy rápido y atractivo, ya que los elementos del DOM son pesados y caros de dibujar para los navegadores. El proceso de actualización del DOM utiliza un algoritmo llamado Reconciliation, se puede leer más en la documentación.

Ejemplo de actualización con Virtual DOM y sin.