Manipulation efficace du DOM avec le DOM virtuel et les références

Le secret des sites Web rapides et réactifs
Vous êtes-vous déjà demandé pourquoi vos sites Web préférés sont si rapides et réactifs ? Tout se résume à la façon dont ils gèrent la manipulation du DOM. Le modèle objet de document (DOM) représente votre page Web sous la forme d'une arborescence structurée. Traditionnellement, nous utilisions des méthodes JavaScript telles que getElementById ou RemoveChild pour apporter des modifications. Mais à mesure que les sites Web deviennent plus complexes, ces méthodes peuvent ralentir les choses. Entrez dans React, avec son DOM virtuel révolutionnaire.

Le défi de la manipulation traditionnelle du DOM
Considérez le DOM comme un arbre massif avec des tonnes de branches. Chaque fois que vous souhaitez modifier quelque chose, comme mettre à jour le premier élément d’une liste de dix, vous finissez par secouer tout l’arbre. Cela peut ralentir les choses, d’autant plus que les pages Web deviennent plus complexes. Plus vous avez de branches (éléments), plus il devient difficile de maintenir le bon fonctionnement de tout.

La solution de React : le DOM virtuel
React résout ce problème avec le Virtual DOM, une copie légère du HTML DOM. Les modifications sont d'abord appliquées au DOM virtuel, puis React met à jour efficacement le DOM réel pour refléter ces modifications. Ce processus, connu sous le nom de réconciliation, garantit que seules les parties nécessaires du DOM sont mises à jour, améliorant ainsi considérablement les performances.

Comment fonctionne le DOM virtuel
Lorsque vous restituez un élément JSX dans React, l'intégralité du DOM virtuel est mis à jour. Bien que cela puisse paraître inefficace, c’est plus rapide que de manipuler directement le vrai DOM. Voici pourquoi : React crée une copie du DOM virtuel avant d’effectuer des mises à jour. Il compare ensuite le DOM virtuel mis à jour avec cette copie à l'aide d'un processus appelé Diffing. Cette comparaison identifie les éléments spécifiques qui ont changé et React met à jour uniquement ces éléments dans le vrai DOM.

Sous le capot : l'algorithme de différence de React
L'algorithme de comparaison de React est la sauce secrète derrière ses mises à jour DOM efficaces. Cet algorithme compare deux versions du Virtual DOM et applique l'ensemble minimal de modifications nécessaires pour les synchroniser.
Si les éléments racine de deux arbres sont de types différents, React reconstruira l'arbre entier. Par exemple, changer un

en a entraînera la destruction et la reconstruction de l'arbre par React à partir de zéro.

<div>
  <Tree/>
</div>
<span>
  <Tree/>
</span>

Étant donné que les éléments racine (div et span) sont différents, React reconstruira l'arbre entier.

Mêmes types d'éléments

<span id="span1" />
<span id="span2" />

Ici, React mettra à jour uniquement l'attribut id, laissant le reste de l'élément intact.

Comparaison des éléments enfants

React optimise également les mises à jour des éléments enfants. Considérez ces listes :

<ul>
  <li>Child1</li>
  <li>Child2</li>
</ul>

<ul>
  <li>Child1</li>
  <li>Child2</li>
  <li>Child3</li>
</ul>

React considère Child3 comme nouveau et se met à jour en conséquence. Cependant, si un nouvel élément est ajouté au début, React peut reconstruire toute la liste. C'est là qu'interviennent les clés.
Le rôle des clés dans l'optimisation des mises à jour

Les touches aident React à suivre les éléments qui ont été modifiés, ajoutés ou supprimés. Ils doivent être uniques parmi les frères et sœurs et stables dans tous les rendus.

<ul>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

<ul>
  <li key="100">Child3</li>
  <li key="101">Child1</li>
  <li key="102">Child2</li>
</ul>

Dans cet exemple, React sait que Child3 est nouveau et met à jour efficacement la liste sans la reconstruire.

Manipulation du DOM avec Refs
Bien que React optimise les mises à jour du DOM avec son DOM virtuel, il existe des scénarios dans lesquels une manipulation directe des éléments du DOM est nécessaire, comme concentrer une entrée, faire défiler jusqu'à un élément spécifique ou mesurer les dimensions d'un élément. React fournit le hook useRef à cet effet. En créant une référence et en l'attachant à un élément DOM via l'attribut ref, vous pouvez accéder directement au nœud DOM. Le hook useRef renvoie un objet avec une propriété actuelle, qui est initialement nulle mais se voit attribuer le nœud DOM une fois rendu. Cela vous permet d'appeler des méthodes DOM natives directement sur l'élément, améliorant ainsi le contrôle sur des interactions spécifiques. Par exemple, vous pouvez utiliser myRef.current.scrollIntoView() pour faire défiler l'élément.

Exemple : Div à changement de couleur
Créons un exemple amusant pour voir cela en action. Nous créerons un div qui change de couleur lorsque vous cliquez sur un bouton. Nous utiliserons un composant basé sur une classe et une référence pour manipuler directement le style du div.

<div id="root"></div>

const root = ReactDOM.createRoot(document.getElementById('root'));

class ColorChanger extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
    this.colors = ['#FFCDD2', '#C8E6C9', '#BBDEFB', '#FFF9C4', '#D1C4E9'];
    this.state = { colorIndex: 0 };
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    const nextColorIndex = (this.state.colorIndex + 1) % this.colors.length;
    this.setState({ colorIndex: nextColorIndex });
    this.divRef.current.style.backgroundColor = this.colors[nextColorIndex];
  }

  render() {
    return (
      <div className="container">
        <div
          ref={this.divRef}
          className="color-box"
          style={{
            backgroundColor: this.colors[this.state.colorIndex],
          }}
        ></div>
        <button onClick={this.changeColor}>Change Color</button>
      </div>
    );
  }
}

root.render(<ColorChanger />);

Explication

Création de la racine : la racine de l'application React est créée à l'aide de ReactDOM.createRoot(document.getElementById('root')).
Composant ColorChanger :
Constructeur : initialise la référence avec React.createRef(), configure le tableau de couleurs et initialise l'état pour suivre l'index des couleurs.
Méthode changeColor : calcule l'index de couleur suivant, met à jour l'état et modifie la couleur d'arrière-plan du div en manipulant directement le DOM.
Méthode de rendu : restitue le div et le bouton, en attachant la référence au div et en définissant le gestionnaire onClick du bouton sur changeColor.
Rendu du composant : le composant ColorChanger est rendu dans l'élément racine.
Conclusion
Le DOM virtuel de React change la donne pour le développement Web, rendant nos applications plus efficaces et plus réactives. En tirant parti du DOM virtuel, React garantit que seules les parties nécessaires du DOM sont mises à jour, améliorant ainsi les performances. Comprendre le fonctionnement de l'algorithme de comparaison et des clés de React peut vous aider à créer des applications React plus fluides et plus rapides. Et lorsque vous avez besoin d’un contrôle précis, les références de React sont là pour vous aider à interagir directement avec le DOM. Profitez de la puissance du DOM virtuel et faites passer vos compétences en développement Web au niveau supérieur !

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!