Comprendre useRef : un guide du débutant

Introduction

A quoi ça sertRéf

useRef est un hook React qui permet de créer une référence persistante à une valeur ou un élément DOM. Contrairement à useState, qui est utilisé pour gérer l'état qui déclenche les rendus, useRef est principalement utilisé pour les effets secondaires ou pour accéder directement aux éléments DOM.

Pourquoi utiliser useRef

Le hook useRef est particulièrement utile pour :

• Accéder directement aux éléments DOM : vous pouvez utiliser useRef pour obtenir une référence à un élément DOM, vous permettant de le manipuler directement sans déclencher un nouveau rendu.
• Créer des valeurs persistantes : contrairement à l'état, les valeurs créées avec useRef persistent entre les rendus, ce qui les rend idéales pour stocker des données qui n'ont pas besoin de déclencher de nouveaux rendus.

Comprendre le hook useRef

Le hook useRef renvoie un objet avec la propriété .current. lorsque vous appelez useRef, cela crée une référence persistante à la valeur que vous transmettez en argument. Cette référence est stockée dans la propriété .current de l'objet renvoyé.

Créer une référence avec useRef

Pour créer une référence, appelez simplement useRef avec la valeur initiale.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

Dans l'exemple ci-dessus, countRef est une référence à la valeur initiale 0.

Accéder à la valeur de référence

Pour accéder à la valeur de référence, appelez simplement l'objet countRef avec la propriété .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current++
  }

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

Dans l'exemple ci-dessus, si vous cliquez sur le bouton, la fonction d'incrémentation sera appelée, ce qui augmentera le nombreRef, mais le nombre ne sera pas mis à jour à

Count : {countRef.current}

car la mise à jour de useRef ne provoque pas de nouveaux rendus comme useState.

mettez à jour le code avec l'exemple ci-dessous pour obtenir le résultat que vous attendez.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current++
    setCount(countRef.current)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default App

Cas d'utilisation courants pour useRef

Accéder et manipuler directement les éléments du DOM

il est possible d'utiliser le hook useRef pour accéder et modifier les propriétés des éléments html

const App = () => {
  const inputRef = useRef(null)

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

  return(
    <input ref={inputRef} />
  )
}

Valeurs persistantes

Contrairement à useState ou variable, useRef peut transmettre des valeurs et des données entre les rendus, telles que les données mises en cache ou les paramètres de configuration.

Optimisation des performances

Dans certains cas, l'utilisation de useRef peut aider à l'optimisation des composants en évitant les nouveaux rendus inutiles. comme si vous avez un composant qui affiche une grande liste d'éléments, vous pouvez le mettre en cache à l'aide de useRef et modifier uniquement, restituer les éléments qui ont changé.

Meilleures pratiques et considérations

• Ne pas écrire ni lire ref.current pendant le rendu
• Vous pouvez muter la propriété ref.current 
• Lorsque vous modifiez la propriété ref.current , React ne restitue pas votre composant
• Les informations sont locales à chaque copie de votre composant (contrairement aux variables externes, qui sont partagées). Vous pouvez stocker des informations entre les rendus (contrairement aux variables régulières, qui réinitialisé à chaque rendu).
• Vous pouvez lire ou écrire des références à partir de gestionnaires d'événements ou d'effets à la place.
• Manipuler le dom avec ref

Passer une référence au composant personnalisé.

Si vous essayez de transmettre une référence à votre propre composant comme celui-ci

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

Vous pourriez obtenir une erreur dans la console :
Attention : les composants de fonction ne peuvent pas recevoir de références. Les tentatives d’accès à cette référence échoueront. Vouliez-vous utiliser React.forwardRef() ?

Pour résoudre ce problème, enveloppez le composant personnalisé avec forwardRef comme ceci :

const inputRef = useRef(null);

return <MyInput value={value} ref={inputRef} />;

Composant personnalisé :

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
});

export default MyInput;

Conclusion

useRef est un hook puissant qui est principalement utilisé pour l'utilisation d'effets secondaires comme la mise en cache des données entre les rendus ou l'accès aux éléments du DOM. C'est un excellent outil pour optimiser les performances et réaliser des fonctionnalités spécifiques dans l'application React.

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!