Le DOM virtuel

Le DOM virtuel est une technique que React utilise pour optimiser l'interaction avec le navigateur

De nombreux frameworks existants, avant l'arrivée de React, manipulaient directement le DOM à chaque changement.

Tout d'abord, qu'est-ce que le DOM?

Le DOM (Modèle d'objet de document) est une représentation arborescente de la page, à partir du<html>tag, descendant dans chaque enfant, qui sont appelés nœuds.

Il est conservé dans la mémoire du navigateur et directement lié à ce que vous voyez dans une page. Le DOM a une API que vous pouvez utiliser pour le parcourir, accéder à chaque nœud, les filtrer, les modifier.

L'API est la syntaxe familière que vous avez probablement vue plusieurs fois, si vous n'utilisiez pas l'API abstraite fournie par jQuery et ses amis:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

React garde une copie de la représentation DOM, pour ce qui concerne le rendu React: le DOM virtuel

Le DOM virtuel expliqué

Chaque fois que le DOM change, le navigateur doit effectuer deux opérations intensives: repeindre (modifications visuelles ou de contenu d'un élément qui n'affectent pas la mise en page et le positionnement par rapport aux autres éléments) et redistribuer (recalculer la mise en page d'une partie de la page - ou la mise en page entière).

React utilise un DOM virtuel pour aider le navigateur à utiliser moins de ressources lorsque des modifications doivent être effectuées sur une page.

Quand vous appelezsetState()sur un composant, en spécifiant un état différent du précédent, React marque ce composant commesale. C'est la clé: Réagissez uniquement quand un composant modifie l'état de manière explicite.

Ce qui se passe ensuite est:

  • React met à jour le DOM virtuel par rapport aux composants marqués comme sales (avec quelques vérifications supplémentaires, comme le déclenchementshouldComponentUpdate())
  • Exécute l'algorithme différent pour réconcilier les modifications
  • Met à jour le vrai DOM

Pourquoi le DOM virtuel est-il utile: le traitement par lots

L'essentiel est que React regroupe une grande partie des modifications et effectue une mise à jour unique du vrai DOM, en modifiant tous les éléments qui doivent être modifiés en même temps, de sorte que le repeint et la redistribution que le navigateur doit effectuer pour rendre les modifications sont exécuté une seule fois.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: