Qu'est-ce que le DOM virtuel?
Récemment, j’ai jeté un œil au cadre React de Facebook. Il utilise un concept appelé "le DOM virtuel", que je ne comprenais pas vraiment.
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 contenant un élément UL, il crée un objet React.div contenant un objet React.ul. Il peut manipuler ces objets très rapidement sans toucher au vrai DOM ni passer par l’API du DOM. Ensuite, lors du rendu d'un composant, il utilise ce DOM virtuel pour déterminer ce qu'il doit faire avec le vrai DOM pour que les deux arbres correspondent.
Vous pouvez considérer le DOM virtuel comme un plan. Il contient tous les détails nécessaires à la construction du DOM, mais comme il ne nécessite pas toutes les pièces lourdes entrant dans un vrai DOM, il peut être créé et modifié beaucoup plus facilement.
Prenons un exemple - bien que très naïf: si vous avez un problème dans une pièce de votre maison et que vous devez le nettoyer, quel sera votre premier pas? Serez-vous en train de nettoyer votre chambre qui est en désordre ou toute la maison? La réponse est certainement que vous ne nettoyerez que la pièce qui nécessite le nettoyage. C'est ce que fait le DOM virtuel.
JS ordinaire traverse ou restitue l'intégralité du DOM au lieu de ne restituer que la partie qui nécessite des modifications.
Ainsi, chaque fois que vous apportez des modifications, comme si vous souhaitez ajouter un autre <div> à votre DOM, le DOM virtuel sera créé, ce qui en réalité ne modifie pas le DOM réel. Maintenant, avec ce DOM virtuel, vous vérifierez la différence entre ce dernier et votre DOM actuel. Et seule la partie différente (dans ce cas, le nouveau <div>) sera ajoutée au lieu de restituer le DOM entier.
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 toute modification de la page.
C’est une étape qui se produit entre la fonction de rendu appelée 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 code 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 HTML réel, ce qui sera affiché dans le navigateur (é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. Pour ce faire, il utilise une différenciation virtuelle du DOM. Comparer deux arbres virtuels - ancien et nouveau - et n'apporter que les modifications nécessaires dans le vrai DOM.
Un virtual DOM (VDOM) n'est pas un nouveau concept: https://github.com/Matt-Esch/virtual-dom.
La VDOM est un moyen stratégique de mettre à jour le DOM sans redessiner tous les nœuds dans une application à une seule page. Il est facile de trouver un nœud dans la structure de tress, mais l’arborescence DOM d’une application SPA peut s’avérer extrêmement lourde. La recherche et la mise à jour d'un ou de plusieurs nœuds en cas d'événement ne sont pas rapides.
La VDOM résout ce problème en créant une abstraction en libellé élevé de dom réel. La VDOM est une représentation arborescente en mémoire légère et de haut niveau du DOM actuel.
Par exemple, envisagez d'ajouter un nœud dans le DOM; réagir conserver une copie de la VDOM en mémoire
- Créer une VDOM avec un nouvel état
- Comparez-le avec l'ancienne VDOM en utilisant diffing.
- Mettre à jour uniquement des nœuds différents dans un DOM réel.
- Attribuez une nouvelle VDOM en tant qu’ancienne VDOM.
Ceci est une brève description et réitération du DOM virtuel souvent mentionné avec 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. Les méthodes précédentes de manipulation du DOM sont limitées. Virtual DOM est une abstraction du DOM HTML littéral créé bien avant la création ou l’utilisation de React, mais nous l’utiliserons de concert avec ReactJS. Le DOM virtuel est léger et distinct de l'implémentation du DOM dans le navigateur. Le DOM virtuel est essentiellement une capture d'écran (ou une copie) du DOM à un moment donné. Le DOM est l’environnement de production et le DOM virtuel est l’environnement local (dev). 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 élémentaire nécessaire pour créer un composant statique dans ReactJS est la suivante:
Vous devez renvoyer le code de la méthode de rendu . Vous devez convertir chaque classe en className puisque la classe est réservée Word en JavaScript . Outre les modifications plus importantes, il existe des différences mineures entre les deux DOM, y compris trois attributs figurant 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, immuable, d'un élément DOM.
- ReactElement - Il s'agit du type principal dans 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.
Chaque fois qu'un ReactComponent subit un changement d'état, nous souhaitons modifier le moins possible 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érentiel, il est converti en code de bas niveau (HTML DOM), exécuté dans le DOM.
Virtual DOM est une abstraction du HTML DOM qui restitue de manière sélective les sous-arbres de noeuds en fonction des changements d'état. Il effectue le moins de manipulations possible du DOM afin de maintenir vos composants à jour.
C’est un concept intéressant: au lieu de manipuler le DOM directement, ce qui est sujet aux erreurs et repose sur un état mutable, vous produisez plutôt une valeur appelée le DOM virtuel. Le Virtual DOM est alors diffed avec l'état actuel du DOM, ce qui génère une liste d'opérations DOM qui donneraient au DOM actuel l'aspect du nouveau. Ces opérations sont appliquées rapidement par lot.
Tiré de ici.