DOM virtuel et réaction

Commençons par la définition dans reactjs.org

Le DOM virtuel (VDOM) est un concept de programmation dans lequel une représentation idéale ou "virtuelle" d'une interface utilisateur est conservée en mémoire et synchronisée avec le "vrai" DOM ​​par une bibliothèque telle que ReactDOM. Ce processus s'appelle la réconciliation.

C'était une sacrée définition, essayons de la comprendre.

Virtual DOM est un concept implémenté par des bibliothèques au-dessus de l'API du navigateur. Chaque fois qu'une modification est apportée au navigateur, JS parcourt l'ensemble du DOM au lieu de rendre uniquement la partie qui nécessite des modifications. Ce qui prend du temps et coûte cher.

En termes simples, supposons que le moteur de votre voiture ait besoin d'être réparé, vous ferez donc réparer le moteur plutôt que de réparer toute votre voiture. Il en va de même avec le DOM virtuel, au lieu de rendre tout le DOM, seul cet élément est rendu là où la modification est apportée.

React utilise Diff Algorithm pour comparer les modifications entre le nouvel arbre et l'arbre le plus récent (l'arbre ici ne fait que référence aux modifications apportées, à savoir le nouveau VDOM et le VDOM le plus récent). Ce processus de comparaison s'appelle Rapprochement.

React analyse l'arborescence à l'aide de la recherche en largeur (BFS).

Gardez toujours à l'esprit que Virtual DOM n'existe pas physiquement, c'est une représentation en mémoire ou un plan de Real DOM.

Prenons un autre exemple : vous créez un formulaire composé de deux champs de saisie. Maintenant, vous devez ajouter un autre champ de saisie, lorsque vous ajoutez le troisième champ de saisie, VDOM est créé avec vos modifications et le vrai DOM reste inchangé. Maintenant, la comparaison entre VDOM et le vrai DOM se produit et les modifications ne sont apportées que dans la div si nécessaire.

Pourquoi un DOM virtuel ? Simple, c'est ce qui fait réagir vite. Il le fait en différant le DOM virtuel. En comparant deux arborescences virtuelles anciennes et nouvelles, n'apportez que les modifications nécessaires au DOM réel.

Ne vous méprenez pas sur le fait que VDOM est développé par React js, VDOM est un concept utilisé par React js. Le DOM virtuel est essentiellement une capture d'écran du DOM à un moment donné. Chaque fois qu'une modification est apportée, le composant est restitué en créant un nouveau VDOM.

Virtual DOM a gagné en popularité car il rend votre application rapide et supprime le rendu inutile de toute la page. Ce qui économise à la fois du temps et de l'argent.

J'espère que vous avez apprécié l'article et que vous l'avez trouvé utile. Si j'ai raté quelque chose, faites-le moi savoir dans la section des commentaires.