El DOM virtual

El DOM virtual es una técnica que React utiliza para optimizar la interacción con el navegador.

Muchos marcos existentes, antes de que React apareciera en escena, manipulaban directamente el DOM en cada cambio.

Primero, ¿qué es el DOM?

El DOM ( Document Object Model ) es una representación en forma de árbol de la página, que comienza en la htmletiqueta y baja hasta cada elemento secundario, que se denominan nodos.

Se guarda en la memoria del navegador y está directamente vinculado a lo que ves en una página. El DOM tiene una API que puedes usar para recorrerlo, acceder a cada nodo, filtrarlos y modificarlos.

La API es la sintaxis familiar que probablemente hayas visto muchas veces, si no estabas usando la API abstracta proporcionada por jQuery y amigos:

document.getElementById(id)document.getElementsByTagName(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLelement.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()window.contentwindow.onloadwindow.dump()window.scrollTo()

React conserva una copia de la representación del DOM, en lo que respecta a la representación de React: el DOM virtual

Explicación del DOM virtual

Cada vez que cambia el DOM, el navegador tiene que realizar dos operaciones intensivas: repaint (cambios visuales o de contenido en un elemento que no afectan el diseño y el posicionamiento relativo a otros elementos) y reflow (recalcular el diseño de una parte de la página – o el diseño de toda la página).

React utiliza un DOM virtual para ayudar al navegador a utilizar menos recursos cuando es necesario realizar cambios en una página.Te recomendamos Blog sobre Salud dental

Cuando llamas setState()a un Componente y especificas un estado diferente al anterior, React marca ese Componente como sucio . Esto es clave: React solo se actualiza cuando un Componente cambia el estado explícitamente.

Lo que sucede a continuación es:

• React actualiza el DOM virtual en relación con los componentes marcados como sucios (con algunas comprobaciones adicionales, como la activación shouldComponentUpdate())
• Ejecuta el algoritmo de diferenciación para conciliar los cambios.
• Actualiza el DOM real

¿Por qué es útil el DOM virtual?: procesamiento por lotes

Lo fundamental es que React agrupa muchos de los cambios y realiza una actualización única del DOM real, cambiando todos los elementos que necesitan ser cambiados al mismo tiempo, por lo que el repaint y el reflow que el navegador debe realizar para renderizar los cambios se ejecutan solo una vez.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

El DOM virtual

Muchos marcos existentes, antes de que React apareciera en escena, manipulaban directamente el DOM en cada cambio. El DOM virtual es una técnica que React uti

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente