¿Qué es el algoritmo de diferenciación?

React usa DOM virtual , que es una versión ligera del DOM. La única diferencia es la capacidad de escribir la pantalla como el DOM real; de hecho, se crea un nuevo DOM virtual después de cada renderizado. DOM almacena los componentes de un sitio web en una estructura de árbol.

Cómo se actualiza DOM en React:

• En la primera ejecución, se crean tanto el DOM virtual como el árbol DOM real
• React funciona en patrones observables, por lo tanto, cada vez que hay un cambio en el estado, actualiza los Nodes en el DOM virtual.
• Luego, reacciona compara el DOM virtual con el DOM real y actualiza los cambios. Este proceso se llama reconciliación .

React utiliza un algoritmo heurístico llamado algoritmo de diferenciación para la reconciliación basado en estas suposiciones:

1. Elementos de diferentes tipos producirán diferentes árboles.
2. Podemos establecer qué elementos son estáticos y no necesitan ser revisados.

React verifica los elementos raíz en busca de cambios y las actualizaciones dependen de los tipos de elementos raíz,

• Elemento en diferentes tipos: Cada vez que el tipo de elemento cambia en la raíz, React eliminará el árbol viejo y construirá uno nuevo, es decir, una reconstrucción completa del árbol.
• Elementos del mismo tipo: cuando el tipo de elemento modificado es el mismo, React luego verifica los atributos de ambas versiones y luego solo actualiza el Node que tiene cambios sin ningún cambio en el árbol. El componente se actualizará en la próxima llamada del ciclo de vida.

Nota: Esta es la razón por la que siempre debemos usar claves únicas en los elementos para que sea fácil para React determinar los cambios en los elementos.