Virtual DOM : technique derrière les mises à jour rapides du DOM de React.

Bonjour à tous, je suis ravi de lancer une nouvelle série d'articles dans lesquels je vais essayer d'expliquer divers concepts du monde de la programmation. Nous couvrirons tout, des termes comme idempotent et idiomatique aux concepts plus spécifiques liés aux bibliothèques et aux frameworks. Et aujourd’hui, nous allons aborder l’un de ces sujets : DOM virtuel.

Si vous trouvez cela utile, n'oubliez pas de Aimer, partager et commenter sur les sujets que vous aimeriez que j'aborde ensuite. Ne perdons plus de temps et sautons directement dans le DOM virtuel !

REMARQUE : Avant de continuer, il est important de comprendre que le concept de DOM virtuel n'est pas exclusif à React. D'autres bibliothèques frontales JavaScript, comme Vue, l'utilisent également pour améliorer les performances de rendu.

DOMAINE

Le DOM (Document Object Model) est une représentation arborescente d'un document HTML (ou d'une page Web/application Web) utilisant des nœuds ou des objets. Le DOM a été conçu pour que les bibliothèques et frameworks frontend (javascript) puissent interagir avec et manipuler le document par programme via son API.

Pourquoi le DOM virtuel

Bien que le DOM offre un moyen efficace de manipuler un document via son API, les performances peuvent devenir un problème lorsqu'il y a des milliers d'éléments à l'écran. En effet, les mises à jour dans le DOM impliquent souvent la destruction et la recréation de sous-arbres entiers.

C'est là que le DOM virtuel entre en jeu. Le DOM virtuel est une représentation légère en mémoire du DOM réel, permettant une synchronisation rapide et efficace des modifications avec le DOM réel — un processus connu sous le nom de Réconciliation.

Les éléments clés à retenir ici sont :

1. Le Virtual DOM est une version allégée du Real DOM, ce qui signifie qu'il n'a pas toutes les propriétés du Real DOM, ce qui le rend plus efficace à utiliser.
2. Le DOM virtuel existe en mémoire, permettant une manipulation plus rapide et plus efficace avant que les modifications ne soient appliquées au DOM réel.

Dans cette optique, les bibliothèques JavaScript qui utilisent l'API DOM créent leur propre DOM virtuel et le manipulent. Ils mettent à jour le Real DOM uniquement lorsque cela est nécessaire, et même dans ce cas, avec un minimum d'opérations.

Comment le DOM virtuel est-il géré dans React ??

React JS est une bibliothèque populaire développée par Facebook pour créer des interfaces utilisateur. En raison de sa simplicité, il a gagné en popularité et est utilisé dans de nombreux projets Web modernes.

Comme beaucoup d'autres bibliothèques frontales JS, React utilise le concept de DOM virtuel pour gérer efficacement les nouveaux rendus et les mises à jour dans une application.

React utilise un algorithme de comparaison ainsi qu'une technique de réconciliation pour optimiser ce processus. (Plus précisément, la bibliothèque ReactDOM gère cela en coulisses.)

Décomposons-le étape par étape :

1. Fonction render() du composant React

   • La fonction render() du composant React crée d'abord le React Element/Virtual DOM avec le JSX.
   • Il contient une version allégée de son homologue Real DOM et des propriétés supplémentaires telles que $$typeof, props, pour faciliter une comparaison efficace.

2. Algorithme de différence

   • Chaque fois qu'un composant React est mis à jour, un nouveau DOM virtuel est créé et le processus de comparaison commence. Il s'agit d'un algorithme heuristique O(n) basé sur deux hypothèses clés.
     1. Différents types d'éléments produisent différents arbres.
     2. Un accessoire clé peut être utilisé pour suivre quels éléments enfants restent cohérents entre les rendus.

2.1. Étapes de l'algorithme de comparaison

• Lorsque l'algorithme rencontre deux types différents d'éléments DOM : il démolira l'ancien DOM virtuel et en créera un nouveau à partir de zéro en fonction des spécifications du nouvel élément.
• Lorsque React rencontre les mêmes types d'éléments DOM : il préserve l'ancien objet DOM et ne met à jour que les attributs modifiés.
• Pour Éléments React du même type, React conserve l'ancien objet DOM intact et fournit des accessoires mis à jour.
• Lors de la gestion des éléments enfants, React parcourt les deux ensembles d'enfants (ancienne arborescence DOM virtuelle et arborescence nouvellement créée), en effectuant des mises à jour là où des différences existent.

2.2. Pourquoi utiliser des clés ?

Comme mentionné dans le dernier point, l'algorithme de différence parcourt les listes d'enfants et apporte des modifications si nécessaire. Si vous n'utilisez pas de clés dans une liste d'enfants, les performances pourraient en souffrir et vous pourriez rencontrer un comportement inattendu.

Voyons un exemple :

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Dans le scénario ci-dessus, l'algorithme peut réellement gérer efficacement la modification. Il examine chaque enfant d'index et trouve

apple

&&

ananas

est le même dans les deux listes et ne leur fait rien tandis que

grape

n'est présent que dans la nouvelle liste, il en ajoute donc un à l'ancienne liste.

Mais disons, nous voulons ajouter le

grape

au début.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Ici, les performances de l'algorithme diminueront à mesure qu'il verra

grape

à la place de

apple

,

apple

à la place de

ananas

et un nouveau

ananas

en dernière position. Recréant ainsi tous les éléments du strach.

Pour résoudre ce goulot d'étranglement des performances, l'équipe React utilise la clé qui est un identifiant unique attaché à la liste des éléments enfants qui peuvent être utilisés par l'algorithme pour déterminer si l'élément peut être laissé intact et il suffit de réorganiser le poste ou doit être recréé.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

React peut désormais utiliser les attributs Key et repositionner uniquement les éléments enfants non mis à jour lors de l'ajout du nouvel élément enfant.

3) La fonction render() de ReactDOM

Enfin, la fonction render() de ReactDOM est appelée, ce qui concilie les différences entre le nouveau Virtual DOM et le Real DOM. Cela entraîne un minimum d'opérations nécessaires pour restituer le HTML efficacement.

Conclusion

Dans cet article, nous avons exploré le DOM virtuel, une technique utilisée par de nombreuses bibliothèques frontales pour gérer efficacement les modifications de données et d'éléments avec un minimum d'opérations DOM. Nous avons également examiné comment React utilise spécifiquement un processus de comparaison et de réconciliation pour optimiser les mises à jour.

J'espère que cet article vous a aidé à mieux comprendre le fonctionnement du DOM virtuel. Même si vous connaissiez le concept, j'espère Vous savez maintenant ce qu'est Virtual DOM et comment il contribue à la création d'un environnement frontend optimisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!