El Virtual DOM de React

Dado que React se ejecuta del lado del navegador, este está obligado a arreglárseles solo para la actualización de las vistas. De esta forma, React es el que tiene que decirle al navegador que elementos del DOM deberán ser actualizados para reflejar los cambios.

La forma que tiene React para identificar si un componente ha sido actualizado, es muy compleja, aun que podemos resumirla en que React detecta los cambios en los estados en los componentes, y de allí determina que compontes deben de ser actualizado. Sin embargo, actualizar el DOM directamente cada vez que hay un cambio en la vista, es un proceso pesado, por lo que React utiliza algo llamado Virtual DOM, el cual es una representación del DOM real, pero administrado por React.

DOM y Virtual DOM
DOM y Virtual DOM

El Virtual DOM es utilizado por React pare evaluar las actualizaciones que deberá aplicar al DOM real, y una vez evaluados los cambios, se ejecuta un proceso llamado reconciliación, encargado de sincronizar los cambios del Virtual DOM hacia el DOM real. Este proceso hace que React mejore su rendimiento, al no tener que actualizar la vista ante cada cambio, en su lugar, calcula todos los cambios y los aplica en Batch al DOM real.

tip

Nuevo concepto: Reconciliación (Reconciliación)

Reconciliación es el proceso que ejecuta React para sincronizar los cambios que existen en el Virtual DOM contra el DOM real del navegador.

Acerca de este libro

Aplicaciones reactivas con React, NodeJS & MongoDB

Todo lo que acabas de ver en este artículo es solo una pequeña parte del libro Aplicaciones reactivas con React, NodeJS & MongoDB, El libro más completo en español para aprender a crear aplicaciones web completas con las tecnologías más potentes de la actualidad, desde el Frontend con React, hasta el Backend con un poderoso API REST con NodeJS y Express y persistiendo todo en MongoDB. te invito a que veas mi libro:

Ver libro
Todos los derechos reservados ©
Reactive programming
LinkedinYoutubeTwitterFacebook

© 2021, Copyright - Oscar Blancarte. All rights reserved.