Le Virtual DOM en français

Simon Moisselin -

Qu'est-ce que le Virtual DOM ?

En React, le Virtual DOM constitue une représentation conceptuelle d'un objet DOM réel, ressemblant à une copie allégée. Il partage les mêmes propriétés qu'un objet DOM classique, mais il n'a pas la capacité de modifier directement ce qui est affiché à l'écran.

La manipulation du DOM traditionnel peut être lente, alors que celle du Virtual DOM est bien plus rapide, car rien n'est dessiné à l'écran lors du processus. Pour visualiser ce concept, pensez à la manipulation du Virtual DOM comme à l'édition d'un plan architectonique, plutôt qu'à la réorganisation des pièces d'une maison.

Fonctionnement du Virtual DOM

Lorsqu'un élément JSX est rendu, chaque objet dans le Virtual DOM est mis à jour. Bien que cela puisse sembler particulièrement inefficace, le coût de cette opération est négligeable grâce à la rapidité des mises à jour du Virtual DOM. Une fois les mises à jour effectuées, React compare le Virtual DOM avec une capture d'écran (snapshot) de celui-ci prise avant les changements.

En analysant cette comparaison, qui est appelée "diffing", React identifie les objets du Virtual DOM qui ont été modifiés. Ensuite, seules ces modifications sont appliquées au DOM réel. Par exemple, si un élément d'une liste a subi des modifications, React se concentrera uniquement sur le rafraîchissement de cet élément spécifique, laissant les autres intacts.

Cette approche est cruciale : elle permet à React de n'actualiser que les sections du DOM qui en ont vraiment besoin. C'est l'une des raisons principales de la réputation de performance que possède React.

Résumé du processus de mise à jour du DOM dans React

Voici les étapes du processus de mise à jour lorsque l'on travaille avec React :

  1. L'ensemble du Virtual DOM est mis à jour.
  2. Le Virtual DOM est ensuite comparé à son état précédent. React détermine quels objets ont changé.
  3. Les objets modifiés ne sont mis à jour que sur le DOM réel.
  4. Les changements sur le DOM réel entraînent une mise à jour de l'affichage à l'écran.