Virtual DOM

React almacena una réplica del DOM en memoria, llamada virtual DOM. Cada vez que hay un cambio de estado, React ejecuta un algoritmo de diferencición para ver que ha cambiado. Luego, actualiza esta réplica del DOM con los resultados del diff (a este proceso de ver que ha cambiado y actualizar los cambios en el virtual DOM se le llama reconciliación). Cuando ha terminado con las actualizaciones en el Virtual DOM, actualiza el DOM real a partir del virtual sólo con los cambios que se hayan producido entre ambos (a este proceso se le llama render).

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 a )

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.

← Crear nuestro primer proyecto
Código JSX en nuestro proyecto de React →