Virtual DOM

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

React almacena una réplica del DOM en memoria, llamada virtual DOM. Este es el mecanismo de actualización cada vez que hay un cambio de estado:

1. Hay un cambio de estado.

2. Se ejecuta un algoritmo de diferenciación para ver que ha cambiado.

3. Se ejecuta un proceso de reconciliación, que actualiza la réplica del DOM con los resultados del diff.

4. Se ejecuta un proceso de render que consiste en que cuando han terminado las actualizaciones en el Virtual DOM, se actualiza el DOM real a partir del virtual sólo con los cambios que se hayan producido entre ambos.

En el proceso de reconciliación, cuando un nodo sufre un cambio de estado, se comprueba si hay cambios en todos los nodos hijos.

Virtual DOM 1

Fiber Tree (nuevo motor de reconciliación)

Es el nuevo motor de reconciliación de React implementado a partir de la versión 16.

Antes de la versión 16 de React, el proceso de reconciliación era un proceso síncrono durante el cual quedaban bloquedas las interacciones del usuario con la interfaz. Con la introducción de Fiber, este proceso se volvió asíncrono, de manera que si hay un evento prioritario, por ejemplo que un usuario escriba en un cuadro de texto, este tendrá prioridad sobre la reconciliación y podrá ser llevado a cabo. Otro proceso prioritario son las animaciones, etc.

Fiber es un conjunto de objetos que tienen información de todos los nodos de la aplicación, de sus hijos y de sus hermanos. Cuando hay un cambio en un nodo, Fiber comprobará el estado de ese nodo y de todos los nodos hijos.

Fiber hace un proceso de reconciliación comenzando por el componente padre de todo, haciendo un skip en los que no han cambiado y actualizando los que sí así como todos sus hijos.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.