Algoritmo de diferencia de React

Qué hace el algoritmo de diferenciación

Calcula la parte del DOM virtual que realmente cambió y realiza operaciones DOM locales solo en esa parte en lugar de volver a renderizar toda la página.

El algoritmo de diferencia tradicional

Compara nodos secuencialmente mediante recursión de bucle. La complejidad del algoritmo es O (n ^ 3), donde n es el número de nodos en el árbol. ¿este? ? - Si se tuvieran que mostrar 1000 nodos, se tendrían que realizar miles de millones de comparaciones. Incluso si la CPU fuera lo suficientemente rápida como para ejecutar 3 mil millones de comandos, sería difícil calcular la diferencia en un segundo.

Algoritmo de diferenciación

React transforma problemas de complejidad O(n^3) en problemas de complejidad O(n) mediante el desarrollo de una estrategia audaz.

Estrategia de diferenciación

Dos árboles solo compararán nodos en el mismo nivel.

Dado que mover nodos DOM entre niveles es mínimo, React solo comparará nodos en el mismo nivel. Cuando se descubre que un nodo ya no existe, el nodo y sus hijos se eliminan por completo y no se utilizarán para futuras comparaciones. De esta manera, todo el árbol DOM se puede comparar con un solo recorrido del árbol DOM.

El algoritmo más eficiente es mover el subárbol A directamente al nodo D, pero esto implicará comparaciones entre niveles, lo que resultará en un fuerte aumento en la complejidad del tiempo, mientras que el método de React es más simple y eliminará todo A; subárbol y créelo nuevamente. En escenarios de aplicaciones reales, también es muy raro cambiar las dependencias de los componentes.

Nota: Al desarrollar componentes, mantener una estructura DOM estable puede ayudar a mejorar el rendimiento. Por ejemplo, puede ocultar o mostrar nodos mediante CSS en lugar de eliminar o agregar nodos DOM.

De manera similar, cuando un componente D se cambia a un componente G, se eliminará todo el subárbol D y se recrearán los nodos E y F.

Tres métodos: insertar, mover, eliminar

Inserción INSERT_MARKUP, el nuevo tipo de componente no está en la colección anterior, es decir, es un nodo nuevo, debe realizar La inserción en el nuevo nodo funciona.

MOVE_EXISTING se está moviendo, hay un nuevo tipo de componente en la colección anterior y el elemento es un tipo actualizable. En este caso, prevChild = nextChild, debe realizar una operación de movimiento y puede reutilizar el DOM anterior. nodo.

REMOVE_NODE Eliminar, el tipo de componente anterior también está en la nueva colección, pero los elementos correspondientes son diferentes y no se pueden reutilizar ni actualizar directamente. Es necesario realizar una operación de eliminación o el componente anterior no está. la nueva colección. También es necesario realizar una operación de eliminación.

Para list Diff, la clave del nodo ayuda a reutilizar el nodo:

Como se muestra en la figura anterior, cuando no hay clave, si se inserta un nuevo nodo en el En el medio, el proceso Diff. Los nodos que comienzan desde el tercer nodo se eliminan del nodo anterior y se crea un nuevo nodo. Cuando hay una clave, excepto el tercer nodo recién creado, el cuarto y quinto nodo se implementan moviéndose.

¿Por qué son diferentes estas dos situaciones?

Para el primer caso:

key={index} es la misma antes y después de la actualización, ambas 1, 2, 3

Pero al contrario , cuando Cuando las claves son iguales pero los elementos son diferentes, se realizará la eliminación e inserción

Para el segundo caso

clave = {item} la clave es 'll'; 'ww', 'kk', las claves del directorio virtual después de la actualización son kk ll ww respectivamente. En la diferencia de elementos, se encuentra que el nodo del elemento kk es el mismo antes y después de la actualización. créelo, se moverá

Explicación:

Para el primer caso, de hecho, es lo mismo que no tener clave, a menos que su orden sea consistente con la clave <; /p>

Para este fenómeno

Para este fenómeno, React propone una estrategia de optimización que permite a los desarrolladores agregar una clave única para distinguir los nodos secundarios en el mismo grupo en el mismo nivel. ¡Pequeño cambio, pero puede traer una gran diferencia de rendimiento!