DOM: DOM significa ‘Modelo de objeto de documento’. En términos simples, es una representación estructurada de los elementos HTML que están presentes en una página web o aplicación web. DOM representa toda la interfaz de usuario de su aplicación. El DOM se representa como una estructura de datos de árbol. Contiene un Node para cada elemento de la interfaz de usuario presente en el documento web. Es muy útil ya que permite a los desarrolladores web modificar el contenido a través de JavaScript, además el hecho de que esté en formato estructurado ayuda mucho ya que podemos elegir objetivos específicos y todo el código se vuelve mucho más fácil de trabajar. Si desea obtener más información sobre DOM, visite este enlace.
Actualizando DOM:Si sabe un poco sobre JavaScript, es posible que haya visto a personas que utilizan el método ‘getElementById()’ o ‘getElementByClass()’ para modificar el contenido de DOM. Cada vez que hay un cambio en el estado de su aplicación, el DOM se actualiza para reflejar ese cambio en la interfaz de usuario. Aunque hacer cosas como esta no es un problema y funciona bien, considere un caso en el que tenemos un DOM que contiene una gran cantidad de Nodes, y también todos estos elementos web tienen diferentes estilos y atributos. Como DOM se representa como un árbol en sí mismo, actualizar el árbol aquí no es una operación costosa, de hecho, tenemos muchos algoritmos en los árboles para hacer que las actualizaciones sean rápidas. Lo que está demostrando ser costoso es que cada vez que se actualiza el DOM, el elemento actualizado y sus elementos secundarios deben volver a procesarse para actualizar la interfaz de usuario de nuestra página.
Ejemplo:
javascript
// Simple getElementById() method
document.getElementById('some-id').innerValue = 'updated value';
Al escribir el código anterior en la consola o en el archivo JavaScript, suceden estas cosas:
- El navegador analiza el HTML para encontrar el Node con esta identificación.
- Elimina el elemento secundario de este elemento específico.
- Actualiza el elemento (DOM) con el ‘valor actualizado’.
- Vuelve a calcular el CSS para los Nodes principal y secundario.
- Actualice el diseño.
- Finalmente, recorra el árbol y píntelo en la pantalla (navegador).
Entonces, como sabemos ahora, actualizar el DOM no solo implica cambiar el contenido, sino que tiene mucho más adjunto. Además, volver a calcular el CSS y cambiar los diseños implica algoritmos complejos y afectan el rendimiento. Entonces, React tiene un enfoque diferente para lidiar con esto, ya que utiliza algo conocido como Virtual DOM.
DOM virtual: React utiliza el DOM virtual que existe, que es como una copia ligera del DOM real (una representación virtual del DOM). Entonces, para cada objeto que existe en el DOM original, hay un objeto para eso en React Virtual DOM. Es exactamente lo mismo, pero no tiene el poder de cambiar directamente el diseño del documento. La manipulación de DOM es lenta, pero la manipulación de Virtual DOM es rápida ya que no se dibuja nada en la pantalla. Entonces, cada vez que hay un cambio en el estado de nuestra aplicación, el DOM virtual se actualiza primero en lugar del DOM real. Todavía puede preguntarse: “¿No estamos haciendo lo mismo otra vez y duplicando nuestro trabajo? ¿Cómo puede ser esto más rápido? Lea a continuación para entender cómo las cosas serán más rápidas usando el DOM virtual.
Cómo Virtual DOM hace que las cosas sean más rápidas: cuando se agrega algo nuevo a la aplicación, se crea un DOM virtual y se representa como un árbol. Cada elemento de la aplicación es un Node en este árbol. Entonces, cada vez que hay un cambio en el estado de cualquier elemento, se crea un nuevo árbol Virtual DOM. Este nuevo árbol de Virtual DOM luego se compara con el árbol de Virtual DOM anterior y se toma nota de los cambios. Después de esto, encuentra las mejores formas posibles de realizar estos cambios en el DOM real. Ahora solo los elementos actualizados se volverán a representar en la página.
Cómo Virtual DOM ayuda a React:En reaccionar, todo se trata como un componente, ya sea un componente funcional o un componente de clase. Un componente puede contener un estado. Cada vez que cambiamos algo en nuestro archivo JSX o dicho en términos simples, cada vez que cambia el estado de cualquier componente, reacciona actualiza su árbol DOM virtual. Aunque puede parecer que es ineficaz, el costo no es muy significativo, ya que actualizar el DOM virtual no lleva mucho tiempo. React mantiene dos Virtual DOM en cada momento, uno contiene el Virtual DOM actualizado y otro que es solo la versión previa a la actualización de este Virtual DOM actualizado. Ahora compara la versión previa a la actualización con el DOM virtual actualizado y descubre qué ha cambiado exactamente en el DOM, como qué componentes se han cambiado. Este proceso de comparar el árbol DOM virtual actual con el anterior se conoce como‘diferente’ . Una vez que React descubre qué ha cambiado exactamente, actualiza solo esos objetos, en DOM real. React usa algo llamado actualizaciones por lotes para actualizar el DOM real. Simplemente significa que los cambios en el DOM real se envían por lotes en lugar de enviar cualquier actualización para un solo cambio en el estado de un componente. Hemos visto que volver a renderizar la interfaz de usuario es la parte más costosa y React logra hacerlo de la manera más eficiente al garantizar que Real DOM reciba actualizaciones por lotes para volver a renderizar la interfaz de usuario. Todo este proceso de transformación de cambios al DOM real se llama Reconciliación
Esto mejora significativamente el rendimiento y es la razón principal por la que React y su Virtual DOM son muy queridos por los desarrolladores de todo el mundo.