DOM virtuel : comprendre le concept

Le but de cet article n’est pas de nier l’importance du DOM virtuel, mais plutôt d’exposer ce qu’il n’est pas tel qu’il est présenté ici et là dans plusieurs articles et même des tutoriels, et de donner mon point de vue sur la question comme j’ai expérimenté et compris le travail intérieur et le rôle de la DOM virtuelle.

Avant d’aller plus loin, parlons du DOM lui-même.

DOM

Lorsque vous écrivez votre HTML, dans un fichier d’extension “.html”, c’est pour qu’il puisse être lu par un navigateur Web afin d’afficher son contenu. Le code HTML que vous écrivez représente le blueprint à partir duquel votre navigateur va construire le DOM qui signifie Document Object Model..

Pourquoi documenter ? Pourquoi objecter ? Pourquoi modéliser ?

Votre document HTML est le modèle à partir duquel le navigateur créera l’arborescence de votre page de sorte que « Javascript » ait une représentation sous la forme d’un « objet » qu’il saura manipuler. Vous savez donc ce que signifie DOM.

Disons que votre code HTML est le suivant :

  
    !DOCTYPE html>
    html>
      head>
      title>Apprendre à coder/title>
    /head>
    body>
      h1>Langages de Programmation/h1>
      ul>
        li>Java/li>
        li>Go/li>
        li>Typescript/li>
      /ul>
     /body>
    /html>
  

Arborescence DOM pour le code HTML ci-dessus

Une fois l’arborescence DOM construite, vous pouvez utiliser une API Javascript pour accéder à ces éléments pour modifier leur contenu, les supprimer, créer de nouveaux éléments, etc.

Comme Javascript a une représentation d’objet, il existe des méthodes de manipulation telles que `document.getElementsByTagName('li')” qui renvoie une collection de li ou un `document.createElement('p')’ pour créer un élément de paragraphe. Ces éléments peuvent ensuite être ajoutés au DOM.

Revenons maintenant au DOM virtuel de React.js

Qu’est-ce que le DOM virtuel?

Avant de parler du DOM virtuel, nous devons réfléchir au fonctionnement de React.js et en particulier de son cycle de rendu.

Dans React.js, les interfaces utilisateur sont divisées en morceaux de code réutilisables habituellement écrits en langage JSX(Javascript Syntax Extension). Si, par exemple, nous voulons réutiliser un « bouton » à plusieurs endroits dans notre code, nous pouvons créer un « bouton » qui est complètement indépendant et qui peut être greffé dans d’autres composants.

Dans React.js, un composant peut avoir des « données » qui représentent son « état » et lorsque cet « état » est mis à jour, le composant doit rerender.

RERENDER!!!

Voici l’origine de toute la confusion et l’incompréhension du DOM virtuel.

Imaginez que nous ayons un composant plutôt complexe qui représente un bloc important de votre page Web et que son état soit mis à jour. Imaginez encore une fois que si ce n’est qu’une très petite partie qui change, mais selon la philosophie de React, toute la composante devrait «re-render». Si ce changement doit être appliqué directement sur le DOM réel qui comprendra la peinture, le calcul de la disposition, etc. Le rendement sera trop serré.

Les développeurs de React ont donc dû trouver une solution pour éviter les mises à jour DOM inutiles, et cette solution a dû aider React à minimiser le coût de performance d’une telle opération.

Dans la manipulation du vrai DOM, il n’y a pas de “rerender” complet quand une pièce a changé car il est possible de cibler des éléments spécifiques du DOM et d’y appliquer des changements qui n’auront pas d’impact sur l’ensemble du document, alors dire qu’avec le vrai DOM il y a un rendu de l’ensemble DOM à chaque fois qu’il y a un changement est complètement faux et sans fondement. Si React résout le problème en termes de performance, c’est à cause de son propre cycle de rendu.

La façon dont React.js utilise le DOM virtuel pour résoudre son propre problème est qu’à chaque fois, il s’assure d’avoir une copie du DOM sous la forme d’un objet « Javascript », et lorsque l’état est mis à jour, React crée une autre version du DOM virtuel qui est un autre objet Javascript qui est une version plus récente avec l’état mis à jour. Ensuite, il appliquera un algorithme de diffing pour détecter les pièces qui ont changé et ensuite appliquer ses modifications uniquement si nécessaire dans le DOM, de sorte qu’à un moment donné, React finira également par effectuer l’opération coûteuse en toucher le DOM même s’il est plus efficace car le DOM entier n’est pas rafraîchi.

À mon avis, l’un des plus grands avantages de Virtual DOM est l’expérience développeur, car grâce à cette philosophie, React nous offre un API déclarative qui nous évite d’écrire du code pour effectuer la manipulation DOM de manière impérative. Du point de vue du développement, écrire du code déclaratif avec JSX est un énorme avantage et permet de gagner du temps que du code écrit avec Vanilla Javascript ou des bibliothèques comme Jquery. Ce code écrit en JSX sera ensuite traduit en code Javascript permettant la création d’instances de composants React.js.