Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

5.3. Le DOM virtuel

React apporte une nouveauté de taille au monde du développement frontend, il s’agit du DOM virtuel.

L’idée est que React n’ai pas à manipuler directement le DOM du navigateur, et ceci pour deux raisons :

  • Premièrement, les opérations directes de manipulation du DOM sont (très) coûteuses en performance. Ce n’est vraiment pas l’idéal étant donné que nous souhaitons justement développer une application réactive.
  • De plus, cela obliger à utiliser React uniquement pour le développement d’applications Web. Or, avec React, on peut aussi bien développer des applications mobiles, ou des applications à installer directement sur son ordinateur. Bien sûr, dans ce cours nous verrons comment utiliser React dans le cadre d’applications web, mais sachez que d’autres utilisations sont également possibles.

La solution que propose React, est de nous faire utiliser un DOM virtuel, complétement distinct du DOM du navigateur. Ensuite, React va s’occuper pour nous réunir de façon cohérente le DOM virtuel avec le DOM du navigateur, en prenant soin de minimiser le nombre d’opérations nécessaires. Nous n’avons rien de spécifique à faire de ce côté là, c’est React qui s’occupe de tout cela pour nous. Encore une fois, ce système permet d’excellentes performances.

L’autre avantage du DOM virtuel, c’est qu’il nous permet d’utiliser React dans d’autres contextes que celui du navigateur web, comme une application mobile ou de bureau. Le DOM virtuel répond donc bien aux deux problématiques que nous avions évoquées juste au-dessus.

Il nous reste maintenant à voir comment nous pouvons écrire ce fameux DOM virtuel, afin que React s’occupe ensuite de créer la page définitive pour nos utilisateurs. 🤙