Quelle est la caractéristique clé du rendu dans React?

La caractéristique principale du rendu dans React est l'utilisation du Virtual DOM et de l'algorithme de reconciliation pour mettre à jour efficacement l'interface utilisateur.

Le Virtual DOM est une représentation légère du DOM réel en mémoire. React construit un arbre d'éléments Virtual DOM représentant l'état actuel de l'interface utilisateur.

Lorsqu'un composant change d'état ou de props, React crée un nouvel arbre Virtual DOM. Ensuite, il compare ce nouvel arbre avec le précédent (processus appelé "diffing") en utilisant l'algorithme de reconciliation.

L'algorithme de reconciliation détermine le minimum de changements nécessaires pour synchroniser le DOM réel avec le nouveau Virtual DOM. Au lieu de rerender tout le DOM, React ne met à jour que les parties qui ont réellement changé.

Cette approche améliore considérablement la performance en minimisant les manipulations directes du DOM lent.

Exemple du processus:

1. Rendu initial : React crée le Virtual DOM et construit le DOM réel.
2. Changement d'état : Le composant reçoit de nouvelles données ou props.
3. Création d'un nouveau Virtual DOM : React construit un nouvel arbre Virtual DOM.
4. Diffing : Comparaison du nouveau Virtual DOM avec l'ancien.
5. Application des changements : React met à jour uniquement les nœuds modifiés dans le DOM réel.

// Exemple de composant avec état
function Counter() {
  const [count, setCount] = React.useState(0);

  // Cette fonction provoquera un rerender lors du changement d'état
  function handleClick() {
    setCount(count + 1);
  }

  return (
    // Lors du clic sur le bouton, handleClick sera appelé
    <button onClick={handleClick}>
      Clics {count} fois
    </button>
  );
}

Dans cet exemple, chaque clic sur le bouton met à jour l'état avec setCount. React crée un nouvel arbre Virtual DOM avec la nouvelle valeur de count. L'algorithme de reconciliation détecte que seul le nœud de texte à l'intérieur du bouton a changé, et ne met à jour que celui-ci dans le DOM réel.