Comprendre et créer des hooks personnalisés dans React

Table des matières

1. Prérequis
2. Installation
3. Présentation
4. Que sont les crochets personnalisés ?
5. Quand devez-vous créer un crochet personnalisé ?
6. Exemple : création d'un hook personnalisé
   • Étape 1 : Identifier la logique réutilisable
   • Étape 2 : Extraire la logique dans un hook personnalisé
   • Étape 3 : Utiliser le crochet personnalisé
7. Avantages des crochets personnalisés
8. Meilleures pratiques pour les hooks personnalisés
9. Conclusion

Conditions préalables :

Assurez-vous d'avoir les connaissances de base nécessaires dans les domaines suivants :

Connaissance de base de React
Node.js et npm

Installation:

Pour démarrer un nouveau projet React à l'aide de Vite, suivez ces étapes :

je. Ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet :

   npm create vite@latest my-react-app --template react

ii. Accédez au répertoire de votre projet :

     cd my-react-app

iii. Installer les dépendances : Installez les packages nécessaires à votre projet :

   npm install

iv. Démarrez le serveur de développement : Exécutez le serveur de développement :

    npm run dev

Votre application React sera maintenant en cours d'exécution et vous pourrez la visualiser dans votre navigateur à l'adresse http://localhost:5173.

Introduction:

Que sont les React Hooks ? :

Les hooks React sont des fonctions spéciales qui vous permettent d'utiliser l'état et d'autres fonctionnalités React dans des composants fonctionnels. Des hooks comme useState et useEffect sont essentiels pour gérer l’état et les effets secondaires.

Que sont les crochets personnalisés ? :

les hooks personnalisés peuvent être décrits comme un moyen de réutiliser la logique sur plusieurs composants. Au lieu de répéter le code, vous pouvez l'encapsuler dans un hook personnalisé, ce qui rend vos composants plus propres et votre code plus facile à gérer. tout comme les hooks React, lorsque vous utilisez des hooks personnalisés, assurez-vous de commencer le nom de votre composant (utilisez suivi du nom que vous souhaitez donner au composant, par exemple useFetchData).useFetchData peut être un Hook personnalisé qui récupère les données d'une API et les renvoie à votre composant.

comprendre les Hooks ?

Comprendre les crochets :
Des hooks comme useState, useEffect et useContext vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Ce sont des éléments de base qui vous permettent de gérer la logique des composants de manière modulaire.

Quand faut-il créer un hook personnalisé ?

Les hooks personnalisés vous permettent de réutiliser la logique avec état sur différents composants. Un exemple simple est un composant de compteur doté de fonctionnalités d'incrémentation, de décrémentation et de réinitialisation. Si vous avez besoin de la même logique dans plusieurs composants, la logique peut être déplacée vers un hook personnalisé. Un autre exemple couramment utilisé est un composant qui récupère des données à partir d'une API, et si vous avez besoin de la même logique dans plusieurs composants, vous pouvez déplacer cette logique vers un hook personnalisé.

Exemple de création d'un hook personnalisé

Exemple : créons une application de compteur simple avec React hook(useState).in app.jsx

Étape 1 : identifier la logique réutilisable

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

dans le code ci-dessus, la logique réutilisable comprend le contre-état, l'état initial (o), l'incrémentation, la décrémentation et la fonction de réinitialisation. l'incrément ajoute 1 à l'état initial tandis que la décrémentation soustrait 1 de l'état initial, tandis que la réinitialisation réinitialise le premier état initial.

Étape 2 : extraction de la logique dans un hook personnalisé

nous pouvons créer un dossier dans le dossier src nommé Hooks, puis un fichier appelé useCouter.jsx pour le hook personnalisé comme indiqué ci-dessous.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Étape 3 en utilisant le hook personnalisé

Maintenant, utilisons notre hook personnalisé dans App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Exemple 2.

Créons un hook personnalisé useFetch pour tous les appels d'API.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

usage

dans App.jsx, nous pouvons utiliser ce hook personnalisé pour récupérer un nom d'utilisateur à partir de l'espace réservé JSON, comme indiqué ci-dessous ;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Avantages des crochets personnalisés

Réutilisabilité :

L'un des principaux avantages est la réutilisabilité. Vous pouvez utiliser le même hook personnalisé dans plusieurs composants, réduisant ainsi la duplication de code.

Séparation des préoccupations :

Les hooks personnalisés vous aident à séparer la logique de l'interface utilisateur. Vos composants se concentrent sur le rendu, tandis que les hooks personnalisés gèrent la logique.

Composants plus propres :

En déplaçant la logique complexe vers des hooks personnalisés, vos composants deviennent plus simples et plus faciles à comprendre.

Meilleures pratiques pour les hooks personnalisés

Conventions de dénomination :

Les hooks personnalisés doivent commencer par le mot « utiliser » pour suivre la convention de dénomination React. Cela aide également à identifier rapidement les hooks dans votre code.

Exemple : useFetch, useForm, useAuth.

Gestion des dépendances :

Lorsque vous utilisez des hooks comme useEffect dans un hook personnalisé, assurez-vous de gérer correctement les dépendances pour éviter les bugs ou les rendus inutiles.

Éviter les rendus inutiles :

Optimisez vos hooks personnalisés en mémorisant des valeurs ou en utilisant des hooks comme useCallback et useMemo pour éviter de réexécuter des calculs coûteux ou de récupérer des données.

Conclusion

nous avons exploré le concept des hooks personnalisés et leur rôle dans la simplification et l'amélioration du développement d'applications React. En créant des hooks personnalisés, vous pouvez encapsuler et réutiliser une logique avec état, ce qui aide à garder vos composants propres et maintenables.

Découvrez le projet sur GitHub : Mon référentiel GitHub

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!