Los usos de reaccionar virtual dom: 1. Mejorar el rendimiento del código de reacción. El DOM virtual es un objeto js. Crear un objeto js consume mucho menos rendimiento que crear un DOM real. DOM tendrá un gran impacto en la mejora del rendimiento; 2. Para lograr aplicaciones entre terminales, en el lado del navegador, el DOM virtual se convierte en nodos DOM del navegador individuales, o se puede convertir en componentes de aplicaciones nativas para implementar entre terminales. aplicaciones.
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
1. Rendimiento muy mejorado
2. Habilita aplicaciones cross-end (React Native). En el lado del navegador, el DOM virtual se convierte en nodos DOM del navegador individuales. También se puede convertir en componentes de aplicaciones nativas y se pueden realizar aplicaciones de segmentos cruzados.
Por qué mejora el rendimiento
Si no hay un DOM virtual, se creará un DOM real directamente. Cada vez que cambien los datos, se creará un DOM real y luego se comparará el DOM real y luego se modificará el DOM real. DOM consumirá mucho rendimiento (debido a que el árbol DOM generado por JS llamará a la API a nivel de aplicación web, la pérdida de rendimiento de este nivel de API es muy grande), lo que consumirá mucho rendimiento.
La diferencia con el DOM virtual es que el DOM virtual es un objeto js. La creación de un objeto js consume mucho menos rendimiento que la creación de un DOM real.
DOM virtual
DOM virtual es un objeto js
<div id='abc'><span>hola mundo</span></div>//Real DOM['div', {id: 'abc'}, ['span', {}, 'hola mundo' ]]//DOM virtualProceso de carga y actualización de la página.
1.datos estatales
Plantilla 2.jsx
3. Datos + plantilla generan DOM virtual
4. Utilice DOM virtual para generar DOM real
Cinco cambios de estado
6. La plantilla Data + genera un nuevo DOM virtual
7. Compare el DOM virtual original y el nuevo DOM virtual (algoritmo diff)
8. Opere directamente el DOM y cambie diferentes lugares.
Amplíe sus conocimientos:
¿Cuál es el propósito del DOM virtual?
Para lograr una actualización eficiente de los elementos DOM en la página;
En las aplicaciones web tradicionales, a menudo actualizamos los cambios de datos en la interfaz de usuario en tiempo real, por lo que cada pequeño cambio en los datos hará que se vuelva a representar el árbol DOM.
El propósito del DOM virtual es acumular todas las operaciones, calcular estadísticamente todos los cambios y actualizar el DOM de manera uniforme.
Rendimiento muy mejorado
Permite aplicaciones cross-end (React Native). En el lado del navegador, el DOM virtual se convierte en nodos DOM del navegador individuales. También se puede convertir en componentes de aplicaciones nativas y se pueden realizar aplicaciones de segmentos cruzados.
La diferencia entre DOM y DOM virtual
1. El DOM virtual no realizará operaciones de composición tipográfica ni de rediseño.
2. Modifique con frecuencia el DOM virtual, luego compare y modifique las partes que deben cambiarse en el DOM real a la vez (¡nota!) Y finalmente realice la composición tipográfica y el redibujo en el DOM real para reducir la pérdida de composición tipográfica y redibujado excesivo. Nodos DOM.
3. La eficiencia de la composición tipográfica y el rediseño frecuente del DOM real es bastante baja.
4. El DOM virtual reduce efectivamente el redibujado y la composición tipográfica de áreas grandes (nodos DOM reales), porque al final es diferente del DOM real y solo puede representar una parte.