¿Cómo funciona el virtual DOM de React?

Autor: | Última modificación: 25 de agosto de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿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.

¿Qué sigue?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!