Les utilisations de React Virtual Dom : 1. Améliorer les performances du code React. Virtual DOM est un objet js. La création d'un objet js consomme beaucoup moins de performances que la création d'un vrai DOM. Le DOM aura un impact énorme sur l'amélioration des performances ; 2. Pour réaliser des applications multi-terminaux, du côté du navigateur, le DOM virtuel est converti en nœuds DOM de navigateur individuels, ou il peut être converti en composants d'applications natives pour implémenter plusieurs terminaux. candidatures.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version React 17.0.1, ordinateur Dell G3.
1. Performances considérablement améliorées
2. Il permet des applications cross-end (React Native). Du côté du navigateur, le DOM virtuel est converti en nœuds DOM de navigateur individuels. Il peut également être converti en composants d'applications natives et des applications inter-segments peuvent être réalisées.
Pourquoi cela améliore les performances
S'il n'y a pas de DOM virtuel, alors un vrai DOM sera créé directement. Chaque fois que les données changent, un vrai DOM sera créé, puis le vrai DOM sera comparé, puis le vrai DOM sera modifié. DOM consommera beaucoup de performances (étant donné que l'arborescence DOM générée par JS appellera l'API au niveau de l'application Web, la perte de performances de ce niveau d'API est très importante), ce qui consommera beaucoup de performances.
C'est différent avec le DOM virtuel. Virtual DOM est un objet js. La création d'un objet js consomme beaucoup moins de performances que la création d'un vrai DOM par la création d'un DOM virtuel entraînera une énorme amélioration des performances.
DOM virtuel
Le DOM virtuel est un objet js
<div id='abc'><span>bonjour tout le monde</span></div>//Real DOM['div', {id : 'abc'}, ['span', {}, 'bonjour tout le monde' ]]//DOM virtuelProcessus de chargement et de mise à jour des pages
1.état des données
Modèle 2.jsx
3. Données + modèle génèrent un DOM virtuel
4. Utilisez le DOM virtuel pour générer du vrai DOM
5.changements d'état
6. Le modèle Data + génère un nouveau DOM virtuel
7. Comparez le DOM virtuel d'origine et le nouveau DOM virtuel (algorithme diff)
8. Faites fonctionner directement le DOM et changez de lieu
Élargissez vos connaissances :
Quel est le but du DOM virtuel ?
Afin d'obtenir une mise à jour efficace des éléments DOM dans la page ;
Dans les applications Web traditionnelles, nous mettons souvent à jour les modifications des données dans l'interface utilisateur en temps réel, de sorte que chaque petit changement dans les données entraînera un nouveau rendu de l'arborescence DOM.
Le but du DOM virtuel est d'accumuler toutes les opérations, de calculer statistiquement toutes les modifications et de mettre à jour le DOM de manière uniforme.
Performances grandement améliorées
Il permet des applications cross-end (React Native). Du côté du navigateur, le DOM virtuel est converti en nœuds DOM de navigateur individuels. Il peut également être converti en composants d'applications natives et des applications inter-segments peuvent être réalisées.
La différence entre DOM et DOM virtuel
1. Le DOM virtuel n'effectuera pas d'opérations de composition et de redessinage.
2. Modifiez fréquemment le DOM virtuel, puis comparez et modifiez immédiatement les parties qui doivent être modifiées dans le DOM réel (remarque !), et enfin effectuez la composition et le redessinage dans le DOM réel pour réduire la perte de composition et de redessinage excessive. Nœuds DOM.
3. L'efficacité de la composition et du redessinage fréquents du vrai DOM est assez faible.
4. Le DOM virtuel réduit efficacement le redessinage et la composition de grandes zones (nœuds DOM réels), car en fin de compte, il est différent du DOM réel et ne peut en restituer qu'une partie.