Algoritmo de diferencia

El algoritmo Diff se utiliza para determinar qué parte del DOM virtual ha cambiado y luego realizar operaciones DOM locales en esa parte sin volver a renderizar toda la página.

El algoritmo Diff tiene tres estrategias principales:

Estas tres estrategias también se ejecutan de forma secuencial.

Tree Diff recorre cada nivel del árbol para encontrar diferencias, como se muestra en la Figura 1.

Component Diff es comparar las diferencias en la capa de datos

La representación DOM real de Element Diff es comparar las diferencias estructurales

Primero, compare la primera capa. Todas las capas son R y no han cambiado; luego ingrese la segunda capa Component Diff y descubra que el componente A no existe, luego elimine A y sus subcomponentes B y C, finalmente compare la tercera capa y cree A y sus subcomponentes; componentes B y C.

Cuando los nodos están en el mismo nivel, Diff proporciona tres operaciones DOM: eliminar, mover, mover e insertar.

Como se muestra en la Figura 2, primero marque la primera y la última posición de OldVnode y NewVnode como oldS, oldE, newS y newE respectivamente.

(1) oldS y newS son iguales y no cambian, oldS, newS.

(2) newS no coincide con OldVnode, f se inserta delante de oldS, newS.

(3) newS es lo mismo que oldE, oldE se mueve al frente de oldS, newS, oldE--.

(4) newE es lo mismo que oldE, sin cambios, newE--, oldE--.

(5) Ambos son diferentes. Antes de insertar newE en oldS, oldS se elimina, oldS, newS, newE--, oldE--.

(6) oldS gt; oldE, Diff termina, resultado final: a, f, d, e, c.

Finalmente, se adjunta el análisis del código fuente principal:

parche

Esta función realiza las siguientes operaciones:

updateChildren

DOM virtual anterior: /p/580157c93c53