¿Sabes cómo funciona el virtual DOM de React? React es una librería JavaScript que nos permite crear interfaces de usuario en el desarrollo de una aplicación de una sola página, también conocida como SPA. Actualmente, React es la segunda librería más usada en el mundo de la programación y hay razones de peso detrás de su popularidad.
En este post, te enseñaremos cómo funciona el virtual DOM de React, uno de los elementos que distinguen esta herramienta de otras similares.
¿Cómo funciona el virtual DOM de React?
En nuestro post sobre cómo crear un reloj en React, hemos usado código JavaScript para crear una función que pinte la hora por pantalla. Luego, hemos usado el método setInterval para hacer que esta función se actualice cada segundo. Esta forma de crear un reloj es muy precaria, pues requiere que nuestro programa ejecute una función donde nos diga la hora, cree un elemento, lo guarde en el DOM y lo asigne de nuevo al rootElement cada segundo. Sin embargo, el virtual DOM de React consigue que este proceso se simplifique.
Al ver la ejecución de esta función dentro del inspector de tu navegador, notarás que React, a pesar de todos los cambios que le pedimos cada segundo, solamente actualiza el span con la hora. Esto es porque es el único elemento dentro de nuestra función que realmente cambia de un segundo a otro. Esta simplificación de nuestra función es responsabilidad del virtual DOM de React. Esto no sucedería en HTML puro, donde la función se desmontaría y montaría en el DOM sobre el elemento root cada segundo.
Por su parte, el virtual DOM de React funciona como un almacenamiento que contiene toda la estructura de los objetos de nuestro proyecto. Imagínate que este almacenamiento funciona como una foto. Entonces, el virtual DOM almacena una foto con el estado actual de nuestros objetos. En el caso de nuestro reloj, el virtual DOM de React tendrá una foto del segundo anterior y una foto del segundo actual. Esto le permite poder comparar el contenido de nuestros objetos en el DOM en ambos segundos para distinguir exactamente qué cambio hubo entre los dos.
Una vez distingue el cambio entre las dos fotos, esta herramienta decide actualizar el DOM para que solo modifique esa sección de contenido; en nuestro caso, el span con la hora actual. Por esto, React se distingue de otras herramientas de programación, pues no solo nos facilita los cambios, sino que también los implementa de una manera muy eficiente.
Ahora que sabes cómo funciona el virtual DOM de React, ¡es el momento de empezar a aprovecharlo en tus propios proyectos! Para aprender a desarrollar con esta y muchas otras herramientas de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Allí, junto a nuestros excelentes profesores, crearás tus propios proyectos en JavaScript, CSS, HTML, React y muchos más programas. ¡Apúntate!
