El proceso de reconciliación hace que React funcione más rápido. La reconciliación es el proceso a través del cual React actualiza el DOM del navegador.
Los conceptos importantes detrás del funcionamiento del proceso de reconciliación son:
- DOM virtual
- Algoritmo de diferenciación
El término renderizado en React se puede identificar estrechamente como hacer o convertirse en . En el renderizado tradicional, el Navegador realiza las siguientes tareas:
- Crea un DOM (Document Object Model) representado por una estructura de árbol.
- Muestra cualquier dato nuevo en el DOM incluso si los datos son similares a los anteriores.
Esta representación por navegador tiene una secuencia de pasos y es bastante costosa por naturaleza. El concepto de Virtual DOM utilizado por React hace que el renderizado sea mucho más rápido.
DOM virtual: React procesa los componentes JSX en el DOM del navegador, pero conserva una copia del DOM real para sí mismo. Esta copia es el DOM virtual . Podemos pensar en él como el hermano gemelo del DOM real o del navegador. Las siguientes acciones tienen lugar en React:
- React almacena una copia del DOM del navegador que se llama DOM virtual.
- Cuando hacemos cambios o añadimos datos , React crea un nuevo Virtual DOM y lo compara con el anterior .
- La comparación se realiza mediante el algoritmo de diferenciación . Lo interesante es que todas estas comparaciones tienen lugar en la memoria y aún no se cambia nada en el navegador.
- Después de comparar, React continúa y crea un nuevo Virtual DOM con los cambios . Cabe señalar que se pueden producir hasta 200 000 Nodes DOM virtuales en un segundo.
- Luego, actualiza el DOM del navegador con la menor cantidad de cambios posibles sin volver a generar todo el DOM . (Ref: Fig.1) Esto cambia enormemente la eficiencia de una aplicación
Fig.1: Cálculo de diferencias y actualización del DOM del navegador
Supongamos que tenemos nuevos datos similares a los anteriores, Virtual DOM compara las estructuras anteriores y nuevas y ve que no tiene cambios, por lo que no se procesa nada en el navegador. Así es como Virtual DOM está ayudando a mejorar el rendimiento del navegador.
¿Cómo se compara este Virtual DOM con su versión anterior?
Aquí es donde entra en juego el algoritmo de diferenciación . Algunos conceptos utilizados por este Algoritmo son:
- Dos elementos de tipos diferentes producirán árboles diferentes .
- Se aplica Breadth-First Search (BFS) porque si se encuentra un Node como cambiado, volverá a representar todo el subárbol , por lo que el enfoque de profundidad primero no es exactamente óptimo. (Ref: Fig.2)
- Al comparar dos elementos del mismo tipo , mantenga el Node subyacente igual y solo actualice los cambios en los atributos o estilos.
- React usa optimizaciones para que se pueda calcular una diferencia mínima en O (N) de manera eficiente usando este algoritmo.
Fig.2: BFS para atravesar Virtual DOM
Referencia: