Maîtrisez la manipulation et les performances du DOM avec React useRef Hook

Comprendre React useRef Hook : de zéro à héros

Introduction

Lors de la création d'applications avec React, l'un des principaux défis auxquels les développeurs sont confrontés est la gestion de l'état et des performances des composants. Le hook useState de React est largement utilisé pour la gestion des états, mais il peut parfois provoquer des rendus inutiles. C’est là que le hook useRef devient inestimable. Cela nous permet d'interagir directement avec le DOM, de suivre les modifications et de stocker les valeurs sans déclencher de nouveaux rendus de composants.

Dans ce guide, nous explorerons le hook useRef étape par étape, couvrant son objectif, ses avantages et ses cas d'utilisation courants. À la fin, même un débutant sera capable d'implémenter useRef en toute confiance pour résoudre divers défis dans ses applications React.

Qu'est-ce que le crochet useRef de React ?

Le hook useRef fait partie de l’API principale des hooks de React. Il renvoie un objet mutable avec une propriété .current, qui peut être utilisée pour stocker n'importe quelle valeur souhaitée. Contrairement à l'état, la modification de la valeur .current n'entraîne pas le nouveau rendu du composant.

Voici la syntaxe simple pour useRef :

const myRef = useRef(initialValue);

• initialValue : La valeur initiale de l'objet useRef.
• myRef.current : La propriété qui stocke la valeur de référence.

Pourquoi utiliser useRef ?

• Évitez les nouveaux rendus inutiles : les changements d'état déclenchent des nouveaux rendus dans React, mais l'utilisation de useRef vous permet de conserver les valeurs entre les rendus sans provoquer de mises à jour.
• Accéder aux éléments DOM : Souvent, nous devons interagir avec des éléments DOM natifs, par exemple en focalisant un champ de saisie. useRef fournit un moyen efficace de le faire.
• Suivre les changements d'état : vous pouvez suivre des valeurs telles que l'état précédent ou le nombre de rendus qui persistent d'un rendu à l'autre.

Problème : l'état de réaction provoque des rendus inutiles

Dans React, les changements d'état déclenchent de nouveaux rendus. Pour les applications dont les performances sont critiques, des rendus excessifs peuvent ralentir l'application. Prenons un exemple.

Exemple de problème : état provoquant des rendus répétés

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dans cet exemple, cliquer sur le bouton entraînera le nouveau rendu du composant entier, même si vous ne vous souciez peut-être que de la mise à jour de données spécifiques comme le nombre.

Solution : utilisez useRef pour empêcher les nouveaux rendus

Avec useRef, nous pouvons stocker des valeurs sans provoquer de nouveaux rendus inutiles.

Exemple de référence pour résoudre le problème

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dans cet exemple, nous incrémentons countRef.current sans déclencher de nouveau rendu, car React ne restitue pas lorsque useRef change.

Accéder aux éléments DOM à l'aide de useRef

La nature déclarative de React élimine les manipulations directes du DOM. Mais il y a des moments où nous devons accéder directement aux éléments du DOM, comme par exemple focaliser un champ de saisie ou faire défiler jusqu'à une section particulière. C'est là que useRef vient à la rescousse.

Exemple : focalisation d'un champ de saisie

const myRef = useRef(initialValue);

Dans cet exemple, nous attribuons inputRef à l'attribut ref du champ de saisie. La fonction handleFocus est appelée lorsque vous cliquez sur le bouton, ce qui nous permet de focaliser par programme le champ de saisie à l'aide de inputRef.current.focus().

Suivi des changements d'état sans nouveau rendu

Parfois, vous devez suivre les valeurs au fil du temps sans déclencher un nouveau rendu. Un cas d'utilisation courant consiste à suivre l'état précédent d'une variable.

Exemple : suivi de l'état précédent avec useRef

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dans cet exemple, nous utilisons useRef pour stocker la valeur précédente. Le composant s'affiche avec la valeur actuelle, mais la valeur précédente est stockée dans prevValueRef.current et ne déclenche pas de nouveau rendu.

Est-ce que useRef provoque un nouveau rendu ?

Non, la modification d'un objet useRef ne provoque pas de nouveau rendu. Ce comportement rend useRef parfait pour stocker les valeurs que vous devez conserver dans les rendus mais que vous ne souhaitez pas utiliser dans le cadre de la logique de rendu.

Exemple : pas de nouveau rendu lors du changement useRef

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

Dans cet exemple, même si nous modifions renderCountRef.current à chaque nouveau rendu, cela ne provoque aucun nouveau rendu.

Exemple avancé : useRef pour le suivi des événements de clic

Construisons un exemple plus avancé dans lequel nous comptons le nombre de fois où un bouton est cliqué sans provoquer de nouveaux rendus.

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

Dans ce cas, le nombre de clics du bouton est suivi via clickCountRef.current, mais React ne restitue pas le composant.

Erreurs courantes avec useRef

Oublier d'initialiser la référence

N'oubliez pas d'initialiser votre référence avec une valeur ou null.

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

Utilisation de useRef pour stocker l'état du composant

N'utilisez pas useRef comme substitut à useState. useRef ne doit être utilisé que pour les valeurs qui n'affectent pas le rendu. Si la valeur affecte l'affichage du composant, utilisez useState.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

Foire aux questions (FAQ)

1. Quand dois-je utiliser useRef au lieu de useState ?

Utilisez useRef lorsque vous devez stocker une valeur mutable sans déclencher un nouveau rendu. Pour les valeurs qui affectent l'interface utilisateur, utilisez useState.

2. Puis-je utiliser useRef pour stocker l’état précédent ?

Oui, vous pouvez utiliser useRef pour stocker les valeurs précédentes sans déclencher de nouveaux rendus, mais n'oubliez pas de mettre à jour la référence dans useEffect.

3. La modification de useRef provoque-t-elle un nouveau rendu ?

Non, la modification de useRef.current ne provoque pas de nouveaux rendus. C'est pourquoi il est idéal pour les scénarios dans lesquels vous souhaitez éviter les mises à jour inutiles.

4. Comment accéder aux éléments DOM avec useRef ?

Attribuez useRef à l'attribut ref d'un élément DOM, vous pourrez alors accéder à l'élément DOM via ref.current.

Conclusion

Le hook useRef est un outil polyvalent et puissant dans React qui permet aux développeurs de stocker des valeurs, de suivre les états précédents et d'interagir avec les éléments DOM sans provoquer de nouveaux rendus. De la gestion du nombre de clics à la concentration des entrées, useRef ouvre des opportunités pour optimiser les performances et fournir des solutions plus propres et plus efficaces. Avec ce guide, vous disposez désormais des connaissances nécessaires pour implémenter useRef dans divers scénarios, des cas d'utilisation de niveau débutant aux applications plus avancées.

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!