Maîtriser le hook useRef de React : travailler avec DOM et les valeurs mutables

useRef Hook dans React

Le hook useRef est un hook React intégré utilisé pour conserver les valeurs à travers les rendus sans provoquer de nouveaux rendus. Il est souvent utilisé pour interagir directement avec les éléments DOM et pour stocker les valeurs qui doivent persister entre les rendus mais qui n'ont pas nécessairement besoin de déclencher un nouveau rendu.

---

À quoi sertRef ?

Le hook useRef est principalement utilisé à deux fins :

1. Accès aux éléments DOM : Il fournit un moyen de référencer directement des nœuds DOM ou des éléments React, vous permettant d'interagir impérativement avec eux.
2. Valeurs persistantes à travers les rendus : il peut stocker des valeurs mutables qui ne déclencheront pas de nouveau rendu lors de la mise à jour, contrairement à l'état.

---

Syntaxe de useRef

const myRef = useRef(initialValue);

• myRef : Un objet de référence créé par useRef.
• initialValue : La valeur initiale à stocker dans l'objet de référence. Cela peut être n'importe quoi, comme un nœud DOM, un objet ou une valeur primitive.

L'objet de référence renvoyé par useRef a une propriété actuelle, où la valeur réelle est stockée.

---

Comment fonctionne useRef

1. Accès aux éléments DOM : Vous pouvez utiliser useRef pour obtenir un accès direct à un élément DOM dans un composant fonctionnel, tout comme l'attribut ref dans les composants de classe.

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

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

     return (
       <div>
         <input ref={inputRef} />
         <button onClick={focusInput}>Focus Input</button>
       </div>
     );
   };

• Ici, inputRef est utilisé pour référencer le élément, et la fonction focusInput se concentre sur cet élément d'entrée lorsque vous cliquez sur le bouton.

1. Stockage de valeurs mutables dans les rendus : Vous pouvez utiliser useRef pour stocker une valeur qui persiste dans tous les rendus mais ne déclenche pas de nouveau rendu en cas de modification.

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

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

• Dans cet exemple, countRef stocke une valeur mutable. La valeur peut être mise à jour sans provoquer de nouveau rendu, contrairement à useState, qui déclenche un nouveau rendu.

---

Cas d'utilisation courantsRef

1. Accéder aux éléments DOM : par exemple, focaliser un champ de saisie, faire défiler jusqu'à un élément spécifique ou mesurer la taille d'un élément.

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref={topRef}>



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• Explication : prevCountRef stocke la valeur précédente de count, accessible sans déclencher un nouveau rendu.

1. Éviter les nouveaux rendus pour les valeurs complexes : Si vous disposez d'un objet volumineux ou d'une structure de données complexe qui n'a pas besoin de déclencher un nouveau rendu, useRef peut le stocker sans affecter le composant. performances.

2. Intervalle de suivi ou délai d'attente : vous pouvez stocker les identifiants des délais d'attente ou des intervalles pour les effacer plus tard.
   

const myRef = useRef(initialValue);

• Explication : intervalRef stocke l'ID de l'intervalle, et il peut être utilisé pour effacer l'intervalle lorsque le composant est démonté.

---

Différences clés entre useRef et useState

Fonctionnalité useRef useState ête>

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

Re-rendu des déclencheurs Non (ne déclenche pas de nouveau rendu) Oui (déclenche un nouveau rendu lorsque l'état change) Cas d'utilisation Stockage de valeurs mutables ou de références DOM État de stockage affectant le rendu Stockage de valeur Stocké dans la propriété actuelle Stocké dans une variable d'état Persistance entre les rendus Oui (conserve la valeur lors des rendus sans déclencher un nouveau rendu) Oui (mais déclenche un nouveau rendu lors de la mise à jour)

---

Exemple : Utilisation de useRef pour la validation de formulaire

Voici un exemple où useRef est utilisé pour la validation d'un formulaire, en se concentrant sur un champ de saisie lorsqu'il n'est pas valide.

importer React, {useRef, useState } depuis 'react' ;

const FormComponent = () => {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [erreur, setError] = useState('');

  const validateInput = () => {
    si (valeur d'entrée === '') {
      setError('L'entrée ne peut pas être vide');
      inputRef.current.focus(); // Focus sur l'élément d'entrée
    } autre {
      setErreur('');
    }
  } ;

  retour (
    <div>
      <entrée
        ref={inputRef}
        type="texte"
        valeur={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      {erreur && <p>

• Explication :
  • Le inputRef est utilisé pour se concentrer sur l'élément d'entrée si la valeur d'entrée est vide.
  • Cette fonctionnalité ne serait pas possible avec useState car se concentrer sur un élément DOM nécessite un accès direct à l'élément, ce que useState ne peut pas fournir.

---

Résumé d'utilisationRef Hook

• useRef est utilisé pour stocker les références aux éléments DOM et aux valeurs mutables qui ne déclenchent pas de nouveau rendu lors de la mise à jour.
• Il est utile pour accéder directement aux nœuds DOM (par exemple, pour la mise au point, le défilement ou les animations).
• useRef est également pratique pour stocker des valeurs qui persistent à travers les rendus sans avoir besoin de déclencher un nouveau rendu, comme le suivi des valeurs précédentes ou le stockage des ID de délai d'attente/d'intervalle.
• Différence clé : contrairement à useState, la mise à jour de useRef ne déclenche pas de nouveau rendu.

---

Conclusion

Le hook useRef est incroyablement utile pour gérer les valeurs mutables et la manipulation directe du DOM dans React. Que vous travailliez avec des éléments de formulaire, suiviez l'état précédent ou interagiez avec des bibliothèques tierces, useRef fournit une solution propre et efficace. En utilisant useRef, vous pouvez maintenir la persistance sans déclencher de nouveaux rendus inutiles, ce qui en fait un excellent choix pour les opérations sensibles aux performances.

---

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!