A quoi sert React Virtual Dom

Utilisations de React Virtual Dom : 1. Améliorer les performances du code React. Le DOM virtuel 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 virtuel aidera à une grande amélioration des performances ;2. Pour réaliser des applications multi-extrémités, 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 des applications multi-extrémités.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelles sont les utilisations de React Virtual Dom

1 Améliore considérablement les performances

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 peut améliorer les performances

S'il n'y a pas de DOM virtuel, alors le vrai DOM sera créé directement. Chaque fois que les données changent, un vrai DOM sera créé, puis le vrai DOM sera comparé, et. alors le vrai DOM sera modifié. La création d'un vrai DOM nécessite beaucoup de performances (car JS générant une arborescence DOM appellera une API au niveau de l'application Web et 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. Le DOM virtuel est un objet js. La création d'un objet js consomme beaucoup moins de performances que la création d'un vrai DOM. Remplacer la création d'un DOM réel par la création d'un DOM virtuel aura une grande amélioration des performances.

DOM virtuel

Le DOM virtuel est un objet js

<div id=&#39;abc&#39;><span>hello world</span></div>//真实DOM
[&#39;div&#39;, {id: &#39;abc&#39;}, [&#39;span&#39;, {}, &#39;hello world&#39;]]//虚拟DOM

Processus de chargement et de mise à jour des pages

1.state data

2.modèle jsx

3.Data + modèle pour générer un DOM virtuel

4.Utiliser DOM virtuel pour générer du DOM réel

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 de diff)

8.

Élargir les connaissances :

A quoi sert le 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 une modification de l'arborescence DOM. Refaire le rendu.

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.

Améliore considérablement les performances

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 composant d'une application native et une application inter-segments peut être réalisée.

La différence entre le DOM et le DOM virtuel

1 Le DOM virtuel n'effectue pas d'opérations de composition et de redessinage

2 Le DOM virtuel subit des modifications fréquentes, puis compare et modifie les parties qui doivent être modifiées dans le DOM réel. en même temps (remarque ! ), et enfin effectuer la composition et le redessinage dans le vrai DOM pour réduire la perte de composition et de redessinage excessifs des 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 la zone (nœuds DOM réels), en raison de la dernière différence avec le DOM réel, vous ne pouvez en restituer qu'une partie

[Recommandations associées : tutoriel vidéo javascript, web. front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!