Qu'est-ce que le Virtual DOM et pourquoi React l'utilise-t-il ?

Question

Accepted Answer

Le **Virtual DOM (VDOM)** est un arbre d'objets JavaScript léger qui *décrit* à quoi l'interface utilisateur devrait ressembler. C'est une simple représentation en mémoire — pas le vrai DOM du navigateur. React l'utilise parce que **la manipulation directe du vrai DOM est lente**, et le faire manuellement à chaque changement d'état est sujet à erreurs. ## Pourquoi c'est important Quand l'état change, React ne touche pas immédiatement la page. À la place : 1. Il construit un **nouvel** arbre virtuel à partir de vos composants. 2. Il le **compare** à l'arbre virtuel précédent (réconciliation) pour calculer l'ensemble minimal de changements. 3. Il applique **uniquement ces changements** au vrai DOM dans une seule mise à jour par lot. ```jsx function Counter() { const [n, setN] = useState(0); // Each click produces a NEW virtual tree describing . // React compares old vs new and updates ONLY the text node that changed, // not the whole button or the page. return ; } ``` Donc vous écrivez du code **de manière déclarative** (« l'interface utilisateur ressemble à *ceci* pour *cet* état ») et React découvre les opérations DOM nécessaires pour vous. ## Pourquoi c'est important / compromis - **Moins d'écritures DOM par lot** → moins de reflows/repaints coûteux. - **Le code déclaratif** est plus facile à comprendre que du `document.querySelector` manuel + mutation. - Ce n'est *pas* magiquement « plus rapide que le DOM » — le diffing lui-même coûte du CPU. L'avantage est que React évite le travail inutile du vrai DOM et vous permet d'arrêter d'optimiser manuellement les mises à jour. Des **clés** stables dans les listes aident le diffing à rester efficace.