Pourquoi est-Réagir au concept de Virtuel DOM dit d'être plus performants que sale vérification de modèle?

J'ai vu un Réagir dev parler à http://www.youtube.com/watch?v=x7cQ3mrcKaY et l'orateur a mentionné qu'sale-vérification du modèle peut être lent. Mais n'est-ce pas le calcul de la différence entre le virtuel DOMs en fait même moins performant depuis le virtuel DOM, dans la plupart des cas, devrait être plus grand que le modèle?

J'aime vraiment le potentiel de puissance du Virtuel DOM (surtout rendu côté serveur) mais je voudrais savoir tous les avantages et les inconvénients.

InformationsquelleAutor Daniil | 2014-01-14
  1. 475

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

    1. Quand dois-je re-rendre? Réponse: Quand j'observe que les données sont sales.
    2. Comment puis-je re-rendre efficace? Réponse: à l'Aide d'un virtual DOM pour générer un réel DOM patch

    À Réagir, chacun de vos composants ont un état. Cet état est comme un fait observable que vous pourriez trouver dans knock-out ou autres MVVM les bibliothèques de styles. Essentiellement, Réagir sait quand à nouveau le rendu de la scène car il est en mesure d'observer lorsque cette modification des données. Sale, le contrôle est plus lent que observables parce que vous devez interroger les données à intervalles réguliers, et de vérifier toutes les valeurs dans la structure de données récursive. Par comparaison, la définition de la valeur sur l'état de signal à un écouteur de l'état a changé, afin de Réagir pouvez simplement écouter les événements de changement de l'état et de la file d'attente ré-rendu.

    Le virtuel DOM est utilisé pour l'efficacité de la ré-rendu de la DOM. Ce n'est pas vraiment sale, de vérifier vos données. Vous pourriez rendre à nouveau à l'aide d'un virtual DOM avec ou sans salir la vérification. Vous avez raison en ce que il ya une surcharge dans le calcul de la diff entre les deux virtuel arbres, mais le virtuel DOM diff est de comprendre ce que les besoins de mise à jour dans les DOM et pas de savoir si ou non vos données a changé. En fait, l'algorithme de comparaison est un sale vérificateur lui-même mais il est utilisé pour voir si le DOM est sale à la place.

    Nous avons pour objectif de re-rendre l'arborescence virtuelle uniquement lorsque les changements d'état. Donc à l'aide d'une observable pour vérifier si l'état a changé, c'est un moyen efficace pour éviter de re-rend, qui pourrait causer beaucoup de complications inutiles arbre de diff. Si rien n'a changé, nous ne faisons rien.

    Virtuel DOM est intéressante parce qu'elle nous permet d'écrire notre code comme si nous étions rendu l'ensemble de la scène. Derrière les scènes que nous voulons calculer une opération de patch de mise à jour des DOM regarder comment nous nous y attendons. Ainsi, alors que le virtuel DOM diff/patch algorithme est probablement pas la solution optimale, il nous donne une très belle façon d'exprimer nos applications. Nous venons de déclarer exactement ce que nous voulons et de Réagir/virtual-dom va travailler sur la façon de rendre votre scène ressembler à ceci. Nous n'avons pas à le faire en manuel de manipulation du DOM ou se confondre sur les précédentes DOM état. Nous n'avons pas à refaire le rendu de l'ensemble de la scène, ce qui pourrait être beaucoup moins efficace que de le corriger.

    • Ne Réagit pas faire sale la vérification sur le composant d'accessoires? Je demande, car il n'y a pas setProps() fonction.
    • Il y a un setProps: facebook.github.io/réagir/docs/composant api.html#setprops
    • De réagir qu'à re-rend implicitement lorsque vous utilisez 'setState'. Si vous venez de changer les accessoires, vous devez vous rendre à nouveau manuellement, à l'aide de renderComponent.
    • Je ne sais pas comment c'était avant, mais setProps() certainement déclenche un nouveau rendu de la composante si les propriétés ont changé. Pas sûr, mais je voudrais danger Réagir uniquement des composants ne peu profondes des comparaisons de leurs accessoires, donc ne pas aller jouer avec les accessoires que vous avez déjà créés (utilisation de Réagir.addons.mise à jour 🙂 )
    • Afin de Réagir, il y a trois DOMs? Le vrai DOM, un deuxième Virtuel DOM qui est un reflet de la vraie DOM, et un troisième DOM qui est celui qui est sale et qui est comparable à l'encontre du second afin de déterminer ce qui a changé? Si oui, où est la deuxième DOM stockées? Il est stocké en interne par la Réagir la bibliothèque et reflète toujours le réel DOM? Je me demandais parce que je voudrais savoir si le remplacement de la racine la plus à Réagir composant dans un site web causes de la seconde DOM (et donc le vrai DOM) pour être remplacé.
    • S'il y a trois DOMs, ce qui se passe lorsque quelqu'un modifie le DOM avec jQuery, en dehors de Réagir de contrôle, et les trois DOMs sont tous différents?
    • Ou, est-il le vrai DOM, et pour chaque racine de Réagir composant qui est rendu dans un emplacement à l'aide de Réagir.le rendu, il y a deux virtuel DOMs? Ainsi, par exemple, si je l'appelle à Réagir.le rendu de mettre deux de Réagir composants dans deux endroits différents, cela veut dire qu'il y aura un total de 5 DOMs (le vrai, deux virtuel DOMs pour la première composante, et deux virtuel DOMs pour le deuxième volet)?
    • ce serait un exemple d'une telle unnecessary re-renders ?
    • Quand vous dites "ainsi, Alors que le virtuel DOM diff/patch algorithme est probablement pas la solution optimale", avez-vous l'esprit d'une théorie plus solution optimale?
    • Ce n'est pas tout à fait semblent répondre à la question. Réagir vous oblige à utiliser setState pour signaler que l'état a changé. Si vous avez été capable de faire this.state.cats = 99 vous auriez encore besoin sale de vérifier, pour vérifier le changement de modèle, tout comme Angulaire sale vérifie la valeur de $portée de l'arbre. Ce n'est pas une comparaison de la vitesse des deux techniques, c'est tout simplement une déclaration qui Réagissent de ne pas faire sale vérification parce qu'il a une épine Dorsale de style setter à la place.
    • Non, Réagir n'est pas sale, vérifier les accessoires, il viens de re-rend tout chose en JavaScript quand setState est appelée sur un parent (qui est rapide) puis de diff les DOM. N'utilisez pas de setProps, c'est obsolète.

    InformationsquelleAutor Matt Esch
  2. 129

    J'ai lu récemment un article détaillé sur les Réagissent de l'algorithme de comparaison ici: http://calendar.perfplanet.com/2013/diff/. Ce que je comprends, ce qui fait Réagir vite est:

    • Par lot DOM opérations de lecture/écriture.
    • Efficace de mise à jour de la sous-arborescence seulement.

    Par rapport à sale-case, les principales différences de l'OMI sont:

    1. Modèle de sale-vérification: Réagir composant est explicitement définie comme sale chaque fois que setState est appelé, donc il n'y a pas de comparaison (des données) nécessaires ici. Pour une sale de vérification, la comparaison (des modèles) est toujours possible de chaque digérer boucle.

    2. DOM mise à jour: DOM opérations sont très coûteuses en raison de la modification du DOM s'applique également et calculer les styles CSS, les mises en page. Le gain de temps inutiles DOM modification peut être plus long que le temps passé de comparaison, le virtuel DOM.

    Le deuxième point est encore plus important pour les non-triviales telles que les modèles de l'un avec l'énorme quantité de champs ou grande liste. Un champ de changer de modèle complexe entraînera seulement les opérations nécessaires pour les éléments DOM, impliquant que sur le terrain, au lieu de l'ensemble de la vue/template.

    • En fait, j'ai lu quelques articles, j'ai donc maintenant (au moins en général), comment il fonctionne, je voulais juste comprendre pourquoi il peut être plus efficace que sale vérification de modèle. Et 1) Yup, il n'est pas de comparer des modèles, mais ne compare beaucoup plus virtuel dom 2) Sale-vérification de modèle nous fournir la capacité de mettre à jour uniquement ce qu'il y avait trop (comme Angulaire n')
    • Je crois que certaines parties de la virtual DOM correspondant à la variation de la composante doivent être comparées, tout sale de vérification qui se passe à chaque digérer boucle, pour toutes les valeurs de tous les étendues, même si rien n'a changé. Si une grande quantité de données modifiées, puis Virtual DOM serait moins efficace, mais pas pour les petits modification de données.
    • En parlant de Anguleuses, parce que les observateurs peuvent également muter l'etat, alors que la digestion, la $scope.$digest est exécutée plusieurs fois par digérer cycle, il est donc temps multiples de données complète de comparaison par rapport à un seul temps partiel virtuel arborescence DOM comparaison.
    • c'est triste, donc beaucoup de smart développeurs inventer des "montagnes" de trucs à faire face à "ralentir" DOM et ainsi de suite, au lieu de concentrer notre attention de juste corriger les navigateurs eux-mêmes et de nous débarrasser de DOM lenteur, une fois pour toutes. c'est comme l'utilisation de l'ensemble de l'humanité de ressources à la recherche de façons de traiter le cancer et d'améliorer la vie d'un patient, au lieu de simplement fixer le cancer lui-même. Ridiculise.
    • Le DOM a besoin d'afficher des trucs sur l'écran. Un virtuel DOM ne marche pas. Même avec l'idéal d'effectuer DOM, la création d'un virtual DOM sera plus rapide.
    • Je suis très sceptique quant à la perception d'un gain de vitesse en comparaison avec les méthodes traditionnelles. est-il connu étude sur cette question?
    • Aussi, il sonne comme une bonne idée de ne pas gaspiller de l'énergie pour tenter de guérir une maladie incurable, car sa base, par un effet secondaire de la façon dont les cellules de travail. Tout comme il semble raisonnable de ne pas.et d'essayer de résoudre un problème qui est une fonction de base de la conception de feuilles de style CSS. Voir aussi: plus difficile de penser à un problème n'est pas de la faire disparaître.
    • Êtes-vous puis de modifier le DOM lorsque Réagir les patches, les DOM avec le Virtual DOM? Ne fait pas les DOM puis re-rendu/peinture de l'ensemble de la page?

    InformationsquelleAutor tungd
  3. 72

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

    -- OP

    Réagir n'est pas le seul de manipulation du DOM de la bibliothèque. Je vous encourage à examiner les solutions de rechange à la lecture de ce l'article de Auth0 qui comprend des explications détaillées et des points de référence. Je vais mettre en évidence ici, leurs avantages et leurs inconvénients, comme vous avez demandé:

    React.js " Virtual DOM

    Pourquoi est-Réagir au concept de Virtuel DOM dit d'être plus performants que sale vérification de modèle?

    PROS

    • Rapide et efficace "de comparaison" algorithme
    • De multiples interfaces (JSX, hyperscript)
    • Suffisamment léger pour fonctionner sur des appareils mobiles
    • Beaucoup de traction et mindshare
    • Peut être utilisé sans Réagir (c'est à dire un moteur indépendant)

    INCONVÉNIENTS

    • Pleine copie en mémoire de DOM (plus l'utilisation de la mémoire)
    • Pas de différenciation entre statique et dynamique des éléments

    Ember.js' Lueur

    Pourquoi est-Réagir au concept de Virtuel DOM dit d'être plus performants que sale vérification de modèle?

    PROS

    • Rapide et efficace de comparaison de l'algorithme de
    • Différenciation entre statique et dynamique des éléments
    • 100% compatible avec les Braises de l'API (vous obtenez les avantages sans les mises à jour de votre code existant)
    • Léger représentation en mémoire de DOM

    INCONVÉNIENTS

    • Destiné à être utilisé uniquement en Ember
    • Une seule interface disponible

    Différentiels DOM

    Pourquoi est-Réagir au concept de Virtuel DOM dit d'être plus performants que sale vérification de modèle?

    PROS

    • Utilisation réduite de la mémoire
    • API Simple
    • S'intègre facilement avec de nombreuses interfaces et les cadres (conçu comme un modèle de moteur backend depuis le début)

    INCONVÉNIENTS

    • 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
    InformationsquelleAutor falsarella
  4. 36

    Voici un commentaire par Réagir membre de l'équipe 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 la source de données peut être de n'importe quel format. Il peut être immuable structures de données et de l'état à l'intérieur de fermetures.

    L'angle de modèle n'est pas de préserver la transparence référentielle et est donc intrinsèquement mutable. Vous muter le modèle existant pour le suivi des modifications. Que faire si votre source de données est immuable de données ou d'une nouvelle structure de données à chaque fois (comme une réponse JSON)?

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

    Ces deux choses sont très limitant à des schémas fonctionnels évidemment.

    En outre, lorsque votre modèle de complexité augmente, il devient de plus en plus coûteux à faire sale de suivi. Toutefois, si vous ne faites de comparaison sur le visuel de l'arbre, à l'instar de Réagir, alors il ne pousse pas autant puisque la quantité de données que vous êtes en mesure d'afficher sur l'écran à n'importe quel point donné est limitée par l'Isu. Pete lien ci-dessus couvre plus de la perf avantages.

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

    • En fait sur le dernier paragraphe: il doit être faux: le modèle est plus grand que le virtuel dom, parce que pour chaque valeur de modèle, il est (dans la plupart des cas) au moins un virtuel élément du dom (et habituellement beaucoup plus d'un). Pourquoi dois-je veux modèle qui n'est pas démontré?
    • La pagination en mémoire cache des collections.
    InformationsquelleAutor Sophie Alpert
  5. 0

    Vous pouvez lire cette(https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/) artical savoir sur le Réel DOM Virtuels et des DOM. Espérons qu'il saura vous aider!

    InformationsquelleAutor Hardik Chaudhary
  6. -2

    Virtuel Dom n'est pas inventé par réagir. C'est une partie du dom HTML.
    Il est léger et détaché à partir du navigateur de mise en œuvre de détails.

    Nous pouvons penser virtuel DOM Réagir locaux et copie simplifiée du DOM HTML. Il permet de Réagir à faire ses calculs à l'intérieur de ce monde abstrait et sauter le “réel” DOM opérations, souvent lent et spécifiques à chaque navigateur. En fait il n'y a pas grand differenc entre les DOM et VIRTUEL DOM.

    Ci-dessous sont les points pourquoi Virtuel Dom est utilisé (source https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130):

    Lorsque vous faites:

    document.getElementById('elementId').innerHTML = "New Value" Following thing happens:
    1. Navigateur a besoin de parser le HTML
    2. Il supprime l'élément enfant de elementId
    3. Mises à jour du DOM de la valeur avec la nouvelle valeur
    4. Re-calculer 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. Traverse le rendu de l'arbre et de la peinture sur l'affichage du navigateur

    Recalculer les CSS et changé les mises en page utilise l'algorithme complexe et
    ils l'effet de la performance.

    Ainsi que la mise à jour du modèle DOM des propriétés ie. des valeurs. Il suit un algorithme.

    Maintenant, supposons que si vous mettez à jour les DOM 10 fois directement, puis toutes les étapes ci-dessus va exécuter un par un, et la mise à jour de DOM algorithmes faudra du temps pour les mises à jour de DOM valeurs.

    C'est pourquoi le Vrai DOM est plus lent que le virtuel DOM.

    • Sur l'exemple, si vous êtes modifiying les dom, directement ou par l'intermédiaire d'un virtual dom, puis, enfin, pour les deux cas, vous êtes à la modification du dom.
    • Oui dans les deux cas, nous sommes dans la mise à jour de dom, mais en cas de virtual dom-il des mises à jour, notamment, que la clé(définie de manière unique par diffère de l'algorithme de réagir) champ ou une balise d'élément seulement. Alors que la mise à jour de dom mises à jour ou le rafraîchissement de l'ensemble dom entièrement.
    • J'ai vu cet article de hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130. C'est peut-être mieux à la source si vous n'êtes pas l'auteur.
    • "C'est pourquoi le Vrai DOM est plus lent que le virtuel DOM." Non, monsieur, vous êtes tout simplement faux.
    InformationsquelleAutor Hemant Nagarkoti