#común
- Vista basada en datos
- Componentización
- Ambos usan Virtual DOM
1. Vista basada en datos
En la era de jquery, necesitamos operar con frecuencia el DOM para lograr interacciones y efectos de página; Vue y React resuelven este problema, adoptando un método de vista basado en datos para ocultar las operaciones frecuentes de operar el DOM. Entonces, cuando desarrollamos, solo debemos prestar atención a los cambios de datos, pero los métodos de implementación de los dos son diferentes.
2. Componentización
Tanto React como Vue siguen la idea de la creación de componentes. Se centran en la capa de la interfaz de usuario y dividen la página en algunos bloques pequeños. Estos bloques son componentes, y la combinación y el anidamiento de componentes forman la interfaz web final. Por lo tanto, existen las mismas rutinas durante el desarrollo, como la transferencia de componentes padre-hijo, la gestión del estado de los datos, el enrutamiento frontal, las ranuras, etc.
3.DOM virtual
Tanto Vue como React usan el algoritmo Virtual DOM + Diff. Ya sea que se trate del método de escritura Plantilla de plantilla + opciones de API de Vue, o el método de escritura de Clase o Función de React, la función de procesamiento finalmente se genera y la función de procesamiento devuelve VNode (la estructura de datos de el DOM virtual, esencialmente un árbol).
Cuando la interfaz de usuario se actualiza cada vez, el último VNode se regenerará de acuerdo con el renderizado y luego se comparará con el antiguo VNode almacenado en caché antes, y luego se usará el algoritmo Diff (el núcleo del marco) para actualizar el DOM real ( el DOM virtual es una estructura de objeto js, lo mismo en el motor js, y el DOM real está en el motor de renderizado del navegador, por lo que operar el DOM virtual es mucho menos costoso que operar el DOM real).
#diferencia
Aunque tanto Vue como React son marcos para crear interfaces de usuario, también existen grandes diferencias. En primer lugar, las ideas centrales de los dos son diferentes.
1. Diferentes ideas centrales
El posicionamiento del desarrollo de Vue es reducir el umbral del desarrollo front-end tanto como sea posible, para que más personas puedan comenzar con el desarrollo más rápido. Esta es la característica principal de Vue: un marco progresivo flexible y fácil de usar para la intercepción/proxy de datos, que es más sensible y preciso para detectar cambios en los datos.
El posicionamiento de React desde el principio es proponer nuevas ideas para el desarrollo de UI. React, que está respaldado por la gran empresa Facebook, nunca ha carecido de atención y usuarios desde el principio, y lo que React quiere hacer es subvertir el método de desarrollo front-end de una mejor manera. Entonces, React aboga por la programación funcional (componentes puros), datos inmutables y flujo de datos unidireccional. Por supuesto, donde se requiere bidireccional, también se puede implementar manualmente, como con onChange y setState.
Debido a la diferencia en las ideas centrales de los dos, existen muchas diferencias en el diseño posterior de Vue y React.
2. Diferencias en la escritura de componentes
El enfoque recomendado por React es JSX + estilo en línea, es decir, todo el HTML y CSS están escritos en javascript, es decir, todo en js; el enfoque recomendado por Vue es el formato de plantilla de componente de archivo único (fácil de entender, fácil para entender desde el front-end tradicional), es decir, html, css y js están escritos en el mismo archivo (vue también es compatible con la escritura JSX). Esta diferencia se debe en parte a las diferentes ideas centrales de los dos.
3. El algoritmo diff es diferente
El algoritmo diff tradicional es hacer un bucle y repetir cada nodo. Comparar todos los nodos en los dos árboles uno por uno requiere una complejidad O(n²).Durante el proceso de comparación, se encuentra que el nodo antiguo no se encuentra en el nuevo árbol, luego el nodo antiguo debe eliminarse y un nodo de un árbol debe eliminarse. (Encuentre un nodo adecuado para eliminar) La complejidad de tiempo es O (n). De manera similar, la complejidad de agregar un nuevo nodo también es O (n). La complejidad de diferenciar dos árboles juntos es O (n³). La complejidad del algoritmo Diff tradicional es demasiado alta, vue2.x se ha unido a Virtual Dom y react tiene el mismo principio de optimización de diferencias (reduciendo la complejidad del algoritmo a O(n)).
Las ideas de proceso de los dos son similares:
Diferentes componentes producen diferentes estructuras DOM. Cuando el estilo es diferente, la operación DOM correspondiente es destruir directamente el DOM anterior y crear un DOM nuevo. Un grupo de nodos secundarios en el mismo nivel se puede distinguir por una clave única.
La implementación central del algoritmo Diff de React
React primero atraviesa la nueva colección, for(name in nextChildren), y usa la clave única para determinar si existe el mismo nodo en la colección anterior. Si no, créelo, si es así, if(preChild === nextChild) comparará la posición del nodo en la nueva colección con el lastIndex en la colección anterior, if (child._mountIndex < lastIndex) realizará una operación de movimiento, de lo contrario No se realiza ninguna operación de movimiento. Si durante el proceso de recorrido se encuentra que no hay nodos en la nueva colección, pero hay nodos en la colección anterior, se eliminará.
La implementación central del algoritmo Diff de Vue
updateChildren es el núcleo de vue diff, el proceso se puede resumir como:
Los hijos antiguos y los hijos nuevos tienen cada uno dos variables cabeza y cola StartIdx y EndIdx, y sus dos variables se comparan entre sí. Hay cuatro métodos de comparación en total. Si ninguno de los cuatro métodos coincide, si se establece la clave, la clave se usará para la comparación. Durante la comparación, la variable se inclinará hacia el medio. Una vez que StartIdx > EndIdx indica que al menos uno de los hijos antiguos y el nuevo niños ha sido atravesado, terminará la comparación.
El algoritmo principal de diferencias de Vue2 adopta el algoritmo de comparación de doble extremo. Al mismo tiempo, comienza a comparar ambos extremos de los elementos secundarios antiguos y nuevos, y utiliza el valor clave para encontrar nodos reutilizables y luego realiza operaciones relacionadas. En comparación con el algoritmo Diff de React, puede reducir la cantidad de nodos en movimiento en la misma situación, reducir la pérdida de rendimiento innecesaria y es más elegante.
4. Los principios de respuesta son diferentes
Vista:
Vue se basa en la recopilación, la optimización automática y los datos variables.
Vue escucha recursivamente todos los atributos de los datos y los modifica directamente.
Cuando los datos cambien, busque automáticamente el componente al que se hace referencia y vuelva a renderizar.
Reaccionar
React se basa en una máquina de estado, optimizada manualmente, y los datos son inmutables. Necesita setState para impulsar el nuevo estado para reemplazar el estado anterior. Cuando los datos cambian, con el componente como directorio raíz, todos se vuelven a representar de forma predeterminada, por lo que se necesita el método de función de ciclo de vida shouldComponentUpdate en React para controlar
5. Otras diferencias
Además de las cuatro diferencias anteriores, existen muchas diferencias en los números detallados. Por ejemplo, la diferencia en las API es bastante grande, para que sea más fácil de usar, Vue introduce conceptos como instrucciones y filtros, así como una gran cantidad de opciones API, como reloj y computado, que son muy fáciles de usar. usar.
Sin embargo, React tiene relativamente pocas API, si su base de javascript es relativamente buena, es muy fácil comenzar.