je suis l'auteur principal d'un module virtual-dom , donc je pourrais être en mesure de répondre à vos questions. Il y a en fait 2 problèmes qui doivent être résolus ici

1. Quand dois-je repasser? Réponse: Quand j'observe que les données sont sales.
2. Comment puis-je effectuer un rendu efficace? réponse: utiliser un DOM virtuel pour générer un vrai patch DOM

dans React, chacun de vos composants a un État. Cet état est comme un observable que vous pourriez trouver dans knockout ou d'autres bibliothèques de style MVVM. Essentiellement, React sait quand pour re-rendre la scène parce qu'il est capable d'observer quand ces données changent. La vérification sale est plus lente que observables parce que vous devez sonder les données à un intervalle régulier et vérifier toutes les valeurs dans la structure de données de façon récursive. Par comparaison, le réglage d'une valeur sur l'état signalera à un auditeur qu'un État a changé, donc React peut simplement écouter les événements de changement sur l'état et faire la queue pour re-rendre.

le DOM virtuel est utilisé pour un rendu efficace du DOM. Ce n'est pas vraiment sale, de vérifier vos données. Vous pouvez re-rendre en utilisant un DOM virtuel avec ou sans dirty checking. Vous avez raison sur le fait qu'il y a une certaine surabondance dans le calcul de la différence entre deux arbres virtuels, mais la différence de DOM virtuel est de comprendre ce qui a besoin mise à jour dans le DOM et non si vos données ont changé ou non. En fait, l'algorithme de diff est un vérificateur sale lui-même mais il est utilisé pour voir si le DOM est sale à la place.

nous avons pour objectif de restituer l'arbre virtuel uniquement lorsque l'état change. Ainsi, l'utilisation d'un observable pour vérifier si l'État a changé est un moyen efficace d'empêcher les rendus inutiles, ce qui causerait beaucoup de diffs d'arbre inutiles. Si rien n'a changé, nous ne faisons rien.

un DOM virtuel est bien parce qu'il nous permet d'écrire notre code comme si nous étions en train de recréer la scène entière. Dans les coulisses, nous voulons calculer une opération de patch qui met à jour le DOM pour regarder comment nous nous attendons. Ainsi, alors que l'algorithme virtuel DOM diff/patch n'est probablement pas la solution optimale , il nous donne une très belle façon d'exprimer nos applications. Nous déclarons juste exactement ce que nous voulons et React / virtual-dom va travailler sur la façon de faire votre scène regarder pareil. Nous n'avons pas besoin de faire une manipulation manuelle du DOM ou d'être confus au sujet de L'état précédent du DOM. Nous n'avons pas à refaire la scène entière non plus, ce qui pourrait être beaucoup moins efficace que de la réparer.

j'ai récemment lu un article détaillé sur L'algorithme diff de React ici: http://calendar.perfplanet.com/2013/diff / . D'après ce que j'ai compris, ce qui fait réagir rapidement est:

• opérations de lecture/écriture batched DOM.
• mise à jour efficace du sous-arbre seulement.

par rapport à dirty-check, les principales différences IMO sont:

1. Model dirty-checking : le composant React est explicitement défini comme dirty chaque fois que setState est appelé, il n'y a donc aucune comparaison (des données) nécessaire ici. Pour le contrôle sale, la comparaison (des modèles) arrive toujours chaque boucle digest.

2. mise à jour DOM : les opérations DOM sont très chères parce que la modification du DOM s'appliquera également et calculera les styles CSS, layouts. Le gain de temps inutiles La modification du DOM peut être plus longue que le temps passé à diffuser le DOM virtuel.

le deuxième point est encore plus important pour les modèles non-triviaux tels que celui avec une énorme quantité de champs ou une grande liste. Un changement de champ d'un modèle complexe n'entraînera que les opérations nécessaires pour les éléments DOM impliquant ce champ, au lieu de l'ensemble de la vue/Modèle.

j'aime vraiment le pouvoir potentiel du DOM virtuel (en particulier rendu côté serveur) mais je voudrais savoir tous les avantages et les inconvénients.

-- OP

React n'est pas la seule bibliothèque de manipulation DOM. Je vous encourage à comprendre les alternatives en lisant cet article de Auth0 qui comprend des explications détaillées et des points de référence. Je vais mettre en évidence voici leurs pour et contre, comme vous avez demandé:

React.JS 'Virtual DOM

PROS

• algorithme de diffing rapide et efficace
• frontends multiples (JSX, hyperscript)
• assez léger pour fonctionner sur des appareils mobiles
• Lots de traction et mindshare
• peut être utilisé sans réaction (c.-à-d. comme un moteur indépendant)

CONS

• Full-copie de la mémoire de DOM (plus l'utilisation de la mémoire)
• aucune différenciation entre éléments statiques et dynamiques

---

de Braise.js 'Glimmer

PROS

• Rapide et efficace de comparaison de l'algorithme de
• différenciation entre éléments statiques et dynamiques
• 100% compatible avec L'API Ember (vous obtenez les avantages sans mises à jour majeures de votre code existant)
• représentation en mémoire légère du DOM

CONS

• destiné à être utilisé uniquement en Ember
• une seule interface disponible

---

DOM incrémental 1519140920"

PROS

• utilisation de mémoire réduite
• simple API
• facilement

CONS

• Pas aussi vite que d'autres bibliothèques (ce qui est discutable, voir les indices de référence ci-dessous)
• Moins le partage des idées et de l'utilisation communautaire

voici un commentaire DE Sebastian Markbåge qui jette un peu de lumière:

Réagir la comparaison sur la sortie (ce qui est connu serializable format, des attributs DOM). Cela signifie que les données source peuvent être de n'importe quel format. Il peut être des structures de données immuables et l'État à l'intérieur des fermetures.

le modèle angulaire ne préserve pas la transparence référentielle et est donc intrinsèquement mutable. Vous muter le modèle existant pour suivre les changements. Que faire si votre source de données est immuable ou une nouvelle structure de données à chaque fois (comme une réponse JSON)?

Sale vérification et de l'Objet.observer ne fonctionne pas sur l'état de la portée de la fermeture.

ces deux choses sont très limitées aux modèles fonctionnels évidemment.

de plus, lorsque la complexité de votre modèle augmente, il devient de plus en plus coûteux de faire du sale tracking. Toutefois, si vous n' faire de la diffusion sur L'arbre visuel, comme React, alors il ne se développe pas autant puisque la quantité de données que vous êtes en mesure de montrer sur l'écran à un point donné est limitée par UIs. Le lien de Pete ci-dessus couvre une plus grande partie des avantages du perf.

https://news.ycombinator.com/item?id=6937668

le Dom virtuel N'est pas inventé par react. C'est une partie du dom HTML. Il est léger et détaché des détails d'implémentation spécifiques au navigateur.

on peut penser que le DOM virtuel est la copie locale et simplifiée du DOM HTML de React. Il permet à React de faire ses calculs dans ce monde abstrait et de sauter les opérations "réelles" du DOM, souvent lentes et spécifiques au navigateur. En fait, il n'y a pas de grande différence entre le DOM et le DOM virtuel.

ci-dessous sont les points pour lesquels le Dom virtuel est utilisé (source https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130 ):

quand vous 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 DOM avec une nouvelle valeur
4. recalculer le css pour le parent et l'enfant
5. mise à Jour de la mise en page c'est à dire chaque éléments les coordonnées exactes sur l'écran
6. parcourir l'arbre de rendu et le peindre sur l'écran du navigateur

recalculer le CSS et les mises en page modifiées utilise un algorithme complexe et ils l'effet de la performance.

ainsi que la mise à jour des propriétés DOM ie. valeur. Il suit un algorithme.

maintenant, supposons que vous mettre à jour DOM 10 fois directement, puis toutes les étapes ci-dessus s'exécuteront une par une et la mise à jour des algorithmes DOM prendra du temps pour mettre à jour les valeurs DOM.

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