Libérer la puissance de useRef : un guide complet pour les développeurs React

Malheureusement, useRef est sous-estimé. Ce n’est pas l’un des hameçons les plus populaires, mais il est bénéfique. Savoir comment et où l'utiliser peut obtenir d'excellents résultats.

Commençons par les bases

useRef est un React Hook qui vous permet de référencer une valeur non nécessaire pour le rendu.

React se souviendra de la valeur que vous créez via useRef, que vous créiez un objet JavaScript faisant référence à un nœud dans le DOM ou à une valeur simple, et elle ne sera pas perdue lors des nouveaux rendus.

Qu'est-ce que cela nous apporte ?

1. Accès aux éléments DOM :

   • Vous pouvez facilement accéder aux éléments dans le DOM. Par exemple, vous pouvez obtenir la valeur d'un champ de saisie, vous concentrer sur des éléments spécifiques, obtenir leur hauteur et leur largeur, faire défiler jusqu'à une partie particulière de l'écran, et bien plus encore.

2. Stockage des valeurs mutables :

   • Vous pouvez mémoriser toutes les données dont vous avez besoin sans restituer les composants. Par exemple, si vous avez besoin d'un compteur ou d'une minuterie, choisissez useRef plutôt que useState.

Exemples

Voici quelques exemples pour illustrer la puissance de useRef.

Exemple 1 : référence à un numéro

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current + 1;
    refInputField.current.focus();
  }

  return (
    <>
      <button onClick={onClick}>
        Click me!
      </button>
      <input ref={refInputField} />
    </>
  );
};

export default Counter;

Dans cet exemple :

• refCount est une référence mutable à un nombre.
• refInputField est une référence à un élément d'entrée.
• Lorsque vous cliquez sur le bouton, le compteur incrémente et le champ de saisie prend le focus.

Exemple 2 : Garder une trace des valeurs précédentes

Un autre cas d'utilisation courant de useRef consiste à garder une trace des valeurs précédentes.

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default PreviousValue;

Dans cet exemple :

• prevCountRef garde une trace de la valeur précédente de count.
• Le hook useEffect met à jour prevCountRef.current chaque fois que le nombre change.
• Cela vous permet d'afficher à la fois les décomptes actuels et précédents sans déclencher de nouveaux rendus inutiles.

Trucs et astuces avancés avec useRef

1. Valeurs persistantes dans les rendus

useRef peut être utilisé pour conserver les valeurs à travers les rendus sans provoquer de nouveau rendu, contrairement à useState. Ceci est particulièrement utile pour stocker des valeurs qui n'ont pas d'impact direct sur l'interface utilisateur mais qui doivent être mémorisées.

Exemple : suivi du nombre de rendus d'un composant.

import React, { useRef, useEffect } from 'react';

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <p>This component has rendered {renderCount.current} times</p>
    </div>
  );
};

export default RenderCounter;

2. Intégration avec des bibliothèques tierces

useRef est inestimable lorsque vous travaillez avec des bibliothèques tierces qui nécessitent une manipulation directe des éléments DOM, comme l'intégration avec des bibliothèques de graphiques, la gestion de lecteurs vidéo ou la gestion d'animations.

Exemple : Intégration d'une bibliothèque de graphiques.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return <canvas ref={chartRef}></canvas>;
};

export default ChartComponent;

3. Éviter les nouveaux rendus inutiles dans les applications complexes

Dans les applications complexes où les performances sont essentielles, l'utilisation de useRef pour stocker des objets mutables peut permettre d'éviter des rendus inutiles.

Exemple : stockage d'un objet d'état mutable.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    <div>
      <button onClick={() => updateName('Jane Doe')}>
        Update Name
      </button>
    </div>
  );
};

export default MutableState;

4. Éviter les problèmes de fermeture

L'utilisation de useRef peut aider à éviter les problèmes de fermeture en fournissant une référence stable à une valeur qui persiste à travers les rendus.

Exemple : minuterie avec useRef pour éviter un état obsolète.

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
};

export default Timer;

Conclusion

Les crochets sont géniaux et vous devriez les utiliser. Vous pouvez réaliser beaucoup de choses si vous comprenez comment fonctionne React et appliquez correctement les hooks. useRef est particulièrement puissant pour :

• Accès et manipulation des éléments DOM.
• Stockage de valeurs mutables qui ne déclenchent pas de nouveaux rendus.
• Valeurs persistantes à travers les rendus.
• Intégration avec des bibliothèques tierces.
• Éviter les nouveaux rendus inutiles dans les applications complexes.
• Atténuer les problèmes de fermeture.

En comprenant et en utilisant useRef, vous pouvez écrire des composants React plus efficaces et efficients. Le véritable pouvoir des hooks réside dans la compréhension de leur comportement et dans leur application judicieuse.

Savez-vous que useState n'est pas toujours la bonne réponse ?

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!