React: así funciona el DOM virtual de esta librería open source

React es una librería open source desarrollada por un equipo de Facebook para la creación de interfaces de usuarios de aplicaciones de una sola página. Esta librería nace debido a un problema de rendimiento que sufrió la aplicación de la red social, la cual venía trabajando con un sistema típico de enlaces entre vistas y datos pero debido a la gran cantidad de conexiones entre ambas capas, el rendimiento de la aplicación se vio afectado.

Este problema, uno muy grande para la red social más utilizada en el mundo, motivó a un equipo de Facebook a optimizar la forma en que se renderizan las vistas según los cambios en los datos de la aplicación. Lograron resolver su problema y trajeron al mundo a React.

Virtual DOM de React: su secreto para su óptimo funcionamiento

Resulta interesante el por qué las aplicaciones que usan React tienen, en la mayoría de los casos, un buen rendimiento. Esto en gran parte se debe al uso de un DOM virtual por parte de la librería.

DOM significa Document Object Model, lo que se traduce a Modelo de objeto de documento. El DOM en palabras simples representa la interfaz de usuario de su aplicación. Cada vez que hay un cambio en el estado de la interfaz de usuario de su aplicación, el DOM se actualiza para representar ese cambio. Ahora el problema es que la manipulación frecuente del DOM afecta el rendimiento, haciéndolo lento.

React usa un virtual DOM, logrando así no perder rendimiento con la manipulación manual de su interfaz de usuario.

El DOM virtual es solo una representación virtual del DOM. Cada vez que cambia el estado de nuestra aplicación, el DOM virtual se actualiza en lugar del DOM real. En palabras sencillas, un DOM virtual se representa como un árbol. Cada elemento es un nodo presente en este árbol, si el estado de alguno de estos cambia ocasiona la creación de un nuevo árbol DOM virtual diferente al anterior.

Cuando ya se completa este proceso, el DOM virtual lo que hace es calcular el método más óptimo para realizar estos cambios en el DOM real, asegurando así que haya el mínimo de operaciones manuales y esto no provoque lentitud en la aplicación.

Te recomendamos en video