Explorer les bases des hooks useReducer et useRef de React / Blogs / Perficient

Dans le vaste paysage du développement de React, les développeurs disposent d’outils puissants pour relever les défis sans effort : le useReducer et useRef crochets. Ce guide propose une plongée approfondie dans ces hooks, dévoilant leurs fonctionnalités, leurs cas d’utilisation adaptables et leurs méthodologies avancées.

Qu’est-ce que « useReducer » ?

Le <strong>useReducer</strong> le hook dans React est une pierre angulaire de la gestion de l’état, offrant une approche plus nuancée que son homologue, <strong>useState.</strong> Sa valeur brille le plus lorsqu’il est aux prises avec une logique d’État complexe, en particulier dans les scénarios où l’État comprend plusieurs sous-valeurs ou où l’État suivant dépend de son prédécesseur.

Utilisation de base

Commençons par un exemple basique. Supposons que nous ayons un contre-composant. Au lieu de recourir à <strong>useState,</strong> les développeurs peuvent employer <strong>useReducer</strong> pour orchestrer la gestion des états au sein de leurs applications React.

Compteur.js

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

export default Counter;

Dans le cadre de cette démonstration, le reducer La fonction fonctionne comme une entité centrale responsable du traitement à la fois de l’état actuel et d’une action, produisant finalement un nouvel état dépendant de la nature de l’action. Grâce à l’utilisation du useReducer hook, nous intégrons cela de manière transparente reducer fonctionner parallèlement à l’état initial. Cette fusion nous donne accès à l’état actuel et à un puissant dispatch fonction, nous permettant de propager des actions directement vers le réducteur, orchestrant ainsi les transformations d’état avec précision et efficacité.

Sortir

Utilisation avancée

useReducer peut gérer des objets d’état plus complexes. Vous pouvez l’utiliser avec des objets, des tableaux ou toute autre structure de données. De plus, vous pouvez le combiner avec useContext pour la gestion globale de l’état ou optimiser les performances avec useMemo et useCallback.

Explorons maintenant un scénario d’utilisation avancée de utiliserRéducteur avec un objet d’état plus complexe :

AdvancedCounter.js

// AdvancedCounter.js
import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  showText: false
};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'toggleText':
      return { ...state, showText: !state.showText };
    default:
      throw new Error();
  }
}

function AdvancedCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <div>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      </div>
      <div>
        <button onClick={() => dispatch({ type: 'toggleText' })}>
          {state.showText ? 'Hide Text' : 'Show Text'}
        </button>
        {state.showText && <p>This is a dynamic text!</p>}
      </div>
    </div>
  );
}

export default AdvancedCounter;

Dans cet exemple, notre objet d’état comprend à la fois un compteur et une valeur booléenne pour basculer la visibilité du texte. La fonction de réduction gère désormais à la fois l’incrémentation du décompte et le basculement de l’affichage du texte.

Sortir

Qu’est-ce que « useRef » ?

Le useRef hook est un autre hook essentiel dans React. Il est principalement utilisé pour accéder et manipuler directement les éléments du DOM. Contrairement à useState ou useReducerse transforme en un ref ne provoque pas de nouveau rendu. Une telle polyvalence le rend apte à diverses tâches, allant de la supervision de la gestion du focus et de la création d’animations impératives à l’intégration transparente avec des bibliothèques DOM tierces.

Utilisation de base

Créons une instance simple pour comprendre comment useRef travaux. Supposons que nous ayons un composant de formulaire qui nécessite de se concentrer sur un champ de saisie lors de son montage.

Formulaire.js

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

function Form() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button>Submit</button>
    </div>
  );
}

export default Form;

Dans l’illustration fournie, useRef apparaît comme la cheville ouvrière, facilitant l’établissement d’une référence à l’élément d’entrée dans la portée du composant. Par la suite, en tirant parti de effect hook, nous orchestrons le focus sur l’élément d’entrée lors du rendu initial du composant, en veillant méticuleusement à ce que cette opération se produise précisément une fois grâce à l’utilisation judicieuse d’un tableau de dépendances vide. [].

Sortir

Utilisation avancée

useRef ne se limite pas aux éléments DOM, il peut également conserver des valeurs mutables à travers les rendus sans provoquer de nouveaux rendus. Cette propriété la rend utile pour stocker les valeurs précédentes, mettre en cache les valeurs entre les rendus ou interagir avec les API impératives.

Découvrons maintenant un scénario d’utilisation complexe où utiliserRef est embauché pour conserver des valeurs mutables :

AdvancedForm.js

// AdvancedForm.js
import React, { useRef, useEffect } from "react";

function AdvancedForm() {
  const renderCount = useRef(0);

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

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

export default AdvancedForm;

Dans ce cas, useRef est ingénieusement exploité pour maintenir le décompte des rendus de composants tout au long des rendus successifs, tout en évitant le déclenchement inutile de rendus supplémentaires. En employant cette tactique, nous garantissons la préservation transparente du nombre de rendus à travers les itérations, illustrant ainsi les capacités polyvalentes du useRef crochet dans le développement de React.

Sortir

Conclusion

Dans ce guide, nous avons exploré deux hooks efficaces fournis par React : useReducer et useRef. useReducer est un outil polyvalent pour gérer une logique d’état complexe, tout en useRef donne un accès direct aux éléments du DOM et permet de conserver les valeurs mutables. Comprendre et maîtriser ces hooks améliorera considérablement vos compétences en développement React, vous permettant de créer des packages plus écologiques et plus robustes. Commencez à les intégrer dans vos projets et explorez tout leur potentiel !