Qu'est-ce que Virtual DOM?

Récemment, j'ai regardé le framework React de Facebook . Il utilise un concept appelé "le DOM virtuel", que je n'ai pas vraiment compris.

Qu'est-ce que le DOM virtuel? Quels sont les avantages?

React crée une arborescence d'objets personnalisés représentant une partie du DOM. Par exemple, au lieu de créer un élément DIV réel contenant un élément UL, il crée un objet React.div qui contient un objet React.ul. Il peut manipuler ces objets très rapidement sans toucher au vrai DOM ni passer par l'API DOM. Ensuite, lorsqu'il rend un composant, il utilise ce DOM virtuel pour déterminer ce qu'il doit faire avec le vrai DOM pour faire correspondre les deux arbres.

Vous pouvez considérer le DOM virtuel comme un plan. Il contient tous les détails nécessaires pour construire le DOM, mais comme il ne nécessite pas toutes les parties lourdes qui entrent dans un vrai DOM, il peut être créé et changé beaucoup plus facilement.

Prenons un exemple - bien que très naïf: si vous avez quelque chose de foiré dans une pièce de votre maison et que vous avez besoin de le nettoyer, quelle sera votre première étape? Nettoyez-vous votre chambre en désordre ou toute la maison? La réponse est certainement que vous ne nettoierez que la pièce qui nécessite le nettoyage. C'est ce que fait le DOM virtuel.

Le JS ordinaire parcourt ou restitue l'ensemble du DOM au lieu de rendre uniquement la partie qui nécessite des modifications.

Ainsi, chaque fois que vous avez des modifications, comme si vous souhaitez en ajouter un autre <div>à votre DOM, le DOM virtuel sera créé, ce qui n'apportera en fait aucun changement dans le DOM réel. Maintenant, avec ce DOM virtuel, vous allez vérifier la différence entre celui-ci et votre DOM actuel. Et seule la partie qui est différente (dans ce cas la nouvelle <div>) sera ajoutée au lieu de re-rendre l'ensemble du DOM.

Qu'est-ce que le DOM virtuel?

Le DOM virtuel est une représentation en mémoire des éléments DOM réels générés par les composants React avant que des modifications ne soient apportées à la page.

C'est une étape qui se produit entre l'appel de la fonction de rendu et l'affichage des éléments à l'écran.

La méthode de rendu d'un composant renvoie du balisage, mais ce n'est pas encore le HTML final. C'est la représentation en mémoire de ce qui deviendra de vrais éléments (c'est l'étape 1). Ensuite, cette sortie sera transformée en vrai HTML, ce qui est affiché dans le navigateur (c'est l'étape 2).

Alors pourquoi passer par tout ça pour générer un DOM virtuel? Réponse simple - C'est ce qui permet de réagir rapidement. Il le fait au moyen du DOM virtuel différent. Comparer deux arbres virtuels - ancien et nouveau - et n'apporter que les modifications nécessaires dans le vrai DOM.

Source de l'Intro To React # 2

Un virtual DOM(VDOM) n'est pas un nouveau concept: https://github.com/Matt-Esch/virtual-dom .

VDOM est stratégiquement pour mettre à jour DOM sans redessiner tous les nœuds dans une seule application de page. Trouver un nœud dans une structure arborescente est facile, mais l'arborescence DOM d'une application SPA peut être considérablement énorme. Trouver et mettre à jour un nœud / des nœuds en cas d'événement n'est pas efficace en termes de temps.

VDOM résout ce problème en créant une abstraction d'étiquette élevée du dom réel. Le VDOM est une représentation arborescente en mémoire légère et de haut niveau du DOM réel.

Par exemple, pensez à ajouter un nœud dans DOM; react conserver une copie du VDOM en mémoire

1. Créer un VDOM avec un nouvel état
2. Comparez-le avec un VDOM plus ancien en utilisant diffing.
3. Mettez à jour uniquement les différents nœuds dans le vrai DOM.
4. Attribuez un nouveau VDOM en tant qu'ancien VDOM.

Ceci est une brève description et une réitération du DOM virtuel souvent mentionné aux côtés de ReactJS.

Le DOM (Document Object Model) est une abstraction de texte structuré, ce qui signifie qu'il est composé de code HTML et css. Ces éléments HTML deviennent des nœuds dans le DOM. Il existe des limitations aux méthodes précédentes de manipulation du DOM. Le DOM virtuel est une abstraction du DOM HTML littéral créé bien avant la création ou l'utilisation de React, mais pour nos besoins, nous l'utiliserons de concert avec ReactJS. Le DOM virtuel est léger et détaché de l'implémentation DOM dans le navigateur. Le DOM virtuel est essentiellement une capture d'écran (ou une copie) du DOM à un moment donné. Une façon de voir les choses du point de vue des développeurs est que le DOM est l'environnement de production et le DOM virtuel est l'environnement local (de développement). Chaque fois que les données changent dans une application React, une nouvelle représentation Virtual DOM de l'interface utilisateur est créée.

La méthode la plus basique nécessaire pour créer un composant statique dans ReactJS est:

Vous devez renvoyer le code de la méthode de rendu. Vous devez convertir chaque classe en className car la classe est un mot réservé en JavaScript. Outre les changements les plus importants, il existe des différences mineures entre les deux DOM, dont trois attributs apparaissant dans le DOM virtuel mais pas dans le DOM HTML (key, ref et dangerouslySetInnerHTML).

Une chose importante à comprendre lorsque vous travaillez avec le DOM virtuel est la différence entre ReactElement et ReactComponent.

ReactElement

• Un ReactElement est une représentation virtuelle légère, sans état et immuable d'un élément DOM.
• ReactElement - Il s'agit du type principal de React et réside dans le DOM virtuel.

• ReactElements peut être rendu dans HTML DOM

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX compile les balises HTML dans ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - Les ReactComponent sont des composants avec état.
• React.createClass est considéré comme un ReactComponent.
• Chaque fois que l'état change, le composant est rendu à nouveau.

Chaque fois qu'un ReactComponent a un changement d'état, nous voulons le moins de changement possible dans le DOM HTML afin que ReactComponent soit converti en ReactElement qui peut ensuite être inséré dans le DOM virtuel, comparé et mis à jour rapidement et facilement.

Lorsque React connaît le diff - il est converti en code de bas niveau (HTML DOM), qui est exécuté dans le DOM.

C'est un concept intéressant: au lieu de manipuler directement le DOM, qui est sujet aux erreurs et repose sur un état mutable, vous produisez à la place une valeur appelée le DOM virtuel. Le DOM virtuel est alors différent de l'état actuel du DOM, ce qui génère une liste d'opérations DOM qui feraient ressembler le DOM actuel au nouveau. Ces opérations sont appliquées rapidement dans un lot.

Pris d' ici.

Le DOM virtuel est une abstraction du DOM HTML qui rend sélectivement les sous-arborescences de nœuds en fonction des changements d'état. Il effectue le moins de manipulations DOM possible afin de maintenir vos composants à jour.

Virtual Dom est créé une copie de Dom. Virtual dom est comparé à dom, et virtual dom met à jour uniquement la partie de dom qui a changé. ce n'est pas le rendu du dom entier, il a juste changé la partie mise à jour de dom in dom. Cela prend beaucoup de temps et à partir de cette fonctionnalité, notre application fonctionne rapidement.

Toutes les réponses sont excellentes. Je viens de proposer une analogie qui peut probablement donner une métaphore du monde réel.

Le vrai DOM est comme votre pièce, les nœuds sont les meubles de votre pièce. Le DOM virtuel est comme si nous dessinions un plan de cette pièce actuelle.

Nous avons tous l'expérience du déplacement de meubles, c'est très fatiguant (même concept que la mise à jour des vues dans les ordinateurs). Par conséquent, chaque fois que nous voulons changer la position / ajouter des meubles (nœuds), nous voulons seulement faire le changement très nécessaire.

Blueprint est venu pour le sauvetage pour y parvenir. Nous dessinons un nouveau plan et comparons la différence avec l'original. Cela nous permet de savoir quelle partie a été modifiée et quelle partie reste la même. Nous effectuons ensuite le changement nécessaire dans la salle réelle (mise à jour des nœuds modifiés sur le vrai DOM). Hourra.

(Certains pourraient penser, pourquoi devons-nous nous fier au virtuel et ne pas comparer directement le vrai DOM? Eh bien, dans l'analogie, comparer le vrai DOM signifie que vous devez créer une autre vraie pièce et la comparer avec votre pièce d'origine . C'est tout simplement trop coûteux.)

mettons de l'ordre et du sens dans cette affaire. React (ou toute autre bibliothèque) est une "couche" sur javascript.

Il n'y a pas de dom virtuel, il y a dom non attaché.

laissez-moi vous expliquer en javascript simple:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

à ce stade, nous avons créé un Div qui n'est pas affiché sur le dom, car il n'a pas attaché

mais on peut y accéder, ajouter des attributs, des valeurs, changer etc.

une fois que nous appelons: (par exemple, ajoutez-le au corps)

    document.body.appendChild(vDom['newDiv'])

alors nous le verrons;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)