Pourquoi le concept de DOM virtuel de React est-il considéré comme plus performant que le model checking sale ?

Question

J'ai vu un React conférence sur le développement à ( Pete Hunt : React : Repenser les meilleures pratiques -- JSConf EU 2013 ) et l'orateur a mentionné que la vérification du modèle peut être lente. Mais le calcul de la différence entre les DOM virtuels n'est-il pas en fait encore moins performant puisque le DOM virtuel, dans la plupart des cas, devrait être plus grand que le modèle ?

J'aime vraiment la puissance potentielle du DOM virtuel (en particulier le rendu côté serveur) mais j'aimerais connaître tous les avantages et les inconvénients.

Answer 1

Le Dom Virtuel n'est pas inventé par la réaction. Il fait partie du HTML dom. Il est léger et détaché des détails d'implémentation spécifiques au navigateur.

Nous pouvons considérer le DOM virtuel comme la copie locale et simplifiée du DOM HTML par React. Il permet à React d'effectuer ses calculs dans ce monde abstrait et de sauter les opérations DOM "réelles", souvent lentes et spécifiques au navigateur. En fait, il n'y a pas de grande différence entre DOM et VIRTUAL DOM.

Voici les points pour lesquels Virtual Dom est utilisé (source DOM virtuel dans ReactJS ):

Quand vous le faites :

document.getElementById('elementId').innerHTML = "New Value" Following thing happens:

1. Le navigateur doit analyser le HTML
2. Il supprime l'élément enfant de elementId
3. Met à jour la valeur du DOM avec la nouvelle valeur
4. Recalculer les css pour le parent et l'enfant
5. Mettre à jour la mise en page, c'est-à-dire les coordonnées exactes de chaque élément à l'écran.
6. Traverser l'arbre de rendu et le peindre sur l'écran du navigateur.

Le recalcul des CSS et des mises en page modifiées utilise un algorithme complexe et ils affectent les performances.

Ainsi que la mise à jour des propriétés du DOM, c'est-à-dire les valeurs. Il suit un algorithme.

Maintenant, supposons que vous mettez à jour le DOM 10 fois directement, alors toutes les étapes ci-dessus seront exécutées une par une et les algorithmes de mise à jour du DOM prendront du temps pour mettre à jour les valeurs du DOM.

C'est pourquoi le DOM réel est plus lent que le DOM virtuel.