Le Virtual DOM (Document Object Model) est un concept introduit par React JS. C’est une abstraction de l’arbre DOM réel. Le modèle DOM est un représentation d’objet structuré de l’arbre HTML.
En manipulant directement le DOM réel, chaque modification peut avoir des effets lourds sur les performances car cela peut entraîner des recalculs coûteux de mise en page (reflow) et de rendu (repaint). React minimise ce problème en utilisant le Virtual DOM.
Lorsqu’un composant React est mis à jour, au lieu de mettre à jour directement le DOM réel, React commence par créer une nouvelle version du Virtual DOM et y applique les modifications. Puis, il compare le Virtual DOM mis à jour avec le Virtual DOM d’avant la mise à jour.
Après cela, React sait exactement quelles objets du Virtual DOM ont changé. Cette phase est appelée la “diffing phase”. Ensuite, React met à jour ces objets uniquement dans le vrai DOM. Cette phase est appelée la reconciliation.
Cela permet à React de minimiser son interaction avec le vrai DOM et donc de rendre ses performances plus efficaces.
