¿Qué es un DOM virtual en React?

El DOM virtual es un concepto fundamental de React. Probablemente haya oído hablar de él si ha escrito código React en los últimos años. Sin embargo, es posible que no comprenda cómo funciona y por qué React lo usa.

Este artículo cubrirá qué es un DOM virtual, sus beneficios en React y un código de muestra práctico para ayudar a explicar este concepto.

En este articulo:

Revisión de conceptos: ¿qué es el DOM?

Para comprender el DOM virtual y por qué React lo implementa, repasemos el DOM del navegador real.

Cada vez que se carga un documento web, como HTML, en el navegador, se crea una representación basada en objetos de los elementos del documento en una estructura de árbol. Esta representación de objetos se denomina Modelo de objetos de documento, también conocido como DOM.

Debido a su naturaleza basada en objetos, JavaScript y otros lenguajes de secuencias de comandos entienden el DOM y pueden interactuar y manipular el contenido del documento. Por ejemplo, con el DOM, los desarrolladores pueden agregar o eliminar elementos, cambiar su apariencia y realizar acciones de usuario en elementos web.

Las operaciones DOM, como consultar y actualizar el DOM, son más livianas y, por lo tanto, muy rápidas. Sin embargo, para que la actualización se refleje en la página web, la página deberá renderizarse.

Cómo afecta el renderizado al rendimiento

Volver a representar la página para reflejar las actualizaciones de DOM es costoso y puede generar problemas de rendimiento porque el navegador tiene que volver a calcular el CSS, volver a ejecutar el diseño para cada elemento visible y volver a pintar la página web.

Simulemos una página renderizada con el siguiente código JavaScript:

const update = () => {
 const element = `
  <h3>JavaScript:</h3>
  <form>
   <input type="text"/>
  </form>
  <span>Time: ${new Date().toLocaleTimeString()}</span>
 `;

 document.getElementById("root1").innerHTML = element;
};

setInterval(update, 1000);

Puedes ver el código completo en CodeSandbox.

El árbol DOM que representa el documento se ve así:

Mediante el uso de una devolución de llamada setInterval() en el código, representamos el estado de la interfaz de usuario cada segundo. Como podemos ver en el GIF a continuación, después del intervalo especificado, el navegador renderiza, ejecuta el diseño y vuelve a pintar la página web, entre otras operaciones.

El navegador DOM no tiene ningún mecanismo para comparar y contrastar lo que ha cambiado y solo vuelve a pintar ese nodo DOM (en este caso, el tiempo de procesamiento):

Esta nueva representación es evidente en la entrada de texto. Como podemos ver, el campo de entrada siempre se borra después del intervalo establecido. Este proceso de volver a renderizar en el navegador después de las manipulaciones DOM es lo que genera problemas de rendimiento.

Re-renderizado en React: por qué se usa el DOM virtual

Como sabemos, React es una biblioteca basada en componentes. Un componente de React se renderizará naturalmente si hay cambios de estado o accesorios o si su componente principal se renderiza.

Más artículos interesantes de LogRocket:

React no puede permitirse el costo de volver a pintar todos los nodos DOM después de cada nuevo renderizado. Para superar este desafío, React implementó el concepto de DOM virtual.

En lugar de permitir que el navegador vuelva a dibujar todos los elementos en la página después de cada nuevo renderizado o actualización de DOM, React usa el concepto de DOM virtual para determinar exactamente qué ha cambiado sin involucrar al DOM real, y luego se asegura de que el DOM real vuelva a pintar solo lo que está necesario. Los datos.

Este concepto ayuda a React a optimizar el rendimiento.

DOM virtual en React

El DOM virtual en React es una representación «virtual» del DOM real. No es más que un objeto creado para replicar el DOM real.

A diferencia del DOM real, el DOM virtual es económico de crear porque no escribe en la pantalla. Solo está disponible como política para evitar que se actualicen elementos de página innecesarios al volver a renderizar.

Eche un vistazo al siguiente código renderizado que representa la versión de React del ejemplo de JavaScript anterior:

// ...
const update = () => {
 const element = (
  <>
   <h3>React:</h3>
   <form>
    <input type="text" />
   </form>
   <span>Time: {new Date().toLocaleTimeString()}</span>
  </>
 );
 root.render(element);
};

Por brevedad, hemos eliminado parte del código. Puedes ver el código completo en CodeSandbox.

También podemos escribir código JSX React simple, como este:

const element = React.createElement(
 React.Fragment,
 null,
 React.createElement("h3", null, "React:"),
 React.createElement(
  "form",
  null,
  React.createElement("input", {
   type: "text"
  })
 ),
 React.createElement("span", null, "Time: ", new Date().toLocaleTimeString())
);

Tenga en cuenta que puede obtener el equivalente de React del código JSX pegando los elementos JSX en un editor de réplica de babel.

Ahora, si registramos el elemento React en la consola:

 const element = (
  <>
   <h3>React:</h3>
   <form>
    <input type="text" />
   </form>
   <span>Time: {new Date().toLocaleTimeString()}</span>
  </>
 );
 console.log(element)

Tendremos algo como esto:

El objeto, como se ve arriba, es el DOM virtual.

Cómo React implementa el DOM virtual

Cuando renderizamos la interfaz de usuario, se crea un DOM virtual para ese renderizador y se mantiene en la memoria. Si se produce una actualización en el renderizado, React crea automáticamente un nuevo árbol DOM virtual para la actualización.

Para explicar mejor esto, representemos visualmente el DOM virtual de la siguiente manera:

Sin embargo, recuerda que el DOM virtual es solo un objeto simple que representa la interfaz de usuario. No se dibuja nada en la pantalla, por lo que es fácil de crear.

Después de que React crea el nuevo árbol DOM virtual, lo compara con la instantánea anterior utilizando un algoritmo diferente para determinar qué cambios se necesitan.

Luego usa una biblioteca llamada ReactDOM para garantizar que el DOM real solo reciba y vuelva a pintar los nodos actualizados. Este proceso se llama reconciliación.

Cuando React implementa el algoritmo de diferenciación, primero compara si las dos instantáneas tienen o no el mismo elemento raíz.

Si tienen el mismo elemento, React continúa y vuelve a recorrer los atributos, luego los elementos secundarios del nodo DOM. Si los elementos raíz son de diferentes tipos, lo que es raro en la mayoría de las actualizaciones, React destruirá los nodos DOM antiguos y construirá un nuevo árbol DOM.

Si inspeccionamos nuestro renderizador React, obtendremos el siguiente comportamiento:

En cada renderizado, React tiene un árbol DOM virtual que compara con la versión anterior para determinar qué contenido de nodo se actualiza y garantizar que el nodo actualizado coincida con el DOM real.

En el GIF anterior, podemos ver que solo el tiempo renderizado cuyo estado cambia se vuelve a pintar con cada nuevo renderizado.

En otro ejemplo a continuación, representamos un componente React simple que actualiza el estado del componente después de hacer clic en un botón:

import { useState } from "react";

const App = () => {
 const [open, setOpen] = useState(false);

 return (
  <div className="App">
   <button onClick={() => setOpen((prev) => !prev)}>toggle</button>
   <div className={open ? "open" : "close"}>
    I'm {open ? "opened" : "closed"}
   </div>
  </div>
 );
};
export default App;

Como se mencionó anteriormente, actualizar el estado de un componente vuelve a generar el componente. Sin embargo, como se ve a continuación, con cada nuevo renderizado, React solo sabe cómo actualizar el nombre de la clase y el texto que ha cambiado.

Ver código y demostración en CodeSandbox.

Resumen del DOM virtual y por qué se usa en React

Cada vez que manipulamos los elementos DOM virtuales en React, omitimos la serie de operaciones involucradas cuando manipulamos directamente el DOM real.

Esto es posible porque con el DOM virtual, no se dibuja nada en la pantalla. Además, con el algoritmo diferente, React puede finalizar la actualización necesaria y solo actualizar el objeto en el DOM real.

El concepto de DOM virtual en React sin duda ayuda a reducir el costo de rendimiento de volver a renderizar la página web, minimizando así el tiempo necesario para volver a pintar la pantalla.

Aquí hay una analogía simple para solidificar aún más nuestro conocimiento del DOM virtual: piense en manipular el DOM virtual como modificar un diseño estructural o plano en lugar de reconstruir la estructura real.

Modificar un plan para incluir una actualización es muy económico en comparación con reconstruir la estructura cada vez que se produce una actualización. Cuando se revisa y finaliza el plan, solo podemos incluir la actualización de la estructura real.

Conclusión

Virtual DOM no es más que una estrategia que utiliza React para optimizar el rendimiento de una aplicación. Proporciona un mecanismo que compara dos árboles de representación para averiguar exactamente qué ha cambiado y solo actualiza lo que se necesita en el DOM real.

Al igual que React, Vue y algunos otros marcos también usan esta estrategia. Sin embargo, el marco Svelte ofrece otro enfoque para garantizar que una aplicación esté optimizada. En su lugar, compila todos los componentes en pequeños módulos de JavaScript independientes, lo que hace que el script sea muy ligero y rápido de ejecutar.

Espero que hayas disfrutado leyendo este artículo. Comparta sus pensamientos en la sección de comentarios si tiene alguna pregunta o contribución.

Visibilidad completa de las aplicaciones React de producción

La depuración de aplicaciones React puede ser un desafío, especialmente cuando los usuarios encuentran problemas que son difíciles de reproducir. Si desea monitorear y rastrear el estado de Redux, mostrar automáticamente errores de JavaScript y rastrear solicitudes de red lentas y tiempos de carga de componentes, pruebe LogRocket.

LogRocket es como un DVR para aplicaciones web y móviles, literalmente graba todo lo que sucede en su aplicación React. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar el estado en el que se encontraba su aplicación cuando ocurrió un problema. LogRocket también supervisa el rendimiento de su aplicación, creando informes con métricas como la carga de la CPU del cliente, el uso de la memoria del cliente y más.

El paquete de middleware LogRocket Redux agrega una capa adicional de visibilidad a sus sesiones de usuario. LogRocket registra todas las acciones y el estado de sus tiendas Redux.

Modernice la forma en que depura sus aplicaciones React: comience a monitorear de forma gratuita.

Fuente