369 votes

Pourquoi le concept de DOM virtuel de React est-il plus performant que la vérification de modèle sale?

J'ai vu Réagir dev parle à 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 virtual DOM dans la plupart des cas devrait être plus grande que modèle, est-il?

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.

492voto

Matt Esch Points 7513

Je suis l'auteur principal d'un virtuel-dom de 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

Dans Réagissent, 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, sait Réagir quand un nouveau 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.

Un 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.

133voto

tungd Points 3587

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:

  • Lots DOM opérations de lecture/écriture.
  • Efficace de mise à jour de la sous-arbre.

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 qu' 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 ou de modèle.

35voto

Ben Alpert Points 30381

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 pref avantages.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X