"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Réutiliser Logic dans React avec des Hooks personnalisés : un guide pratique

Réutiliser Logic dans React avec des Hooks personnalisés : un guide pratique

Publié le 2024-11-08
Parcourir:116

Reusing Logic in React with Custom Hooks: a Practical guide

Les hooks personnalisés sont une fonctionnalité puissante de React qui sont utilisés à des fins plus spécifiques contrairement aux hooks intégrés de React, et cela se fait en encapsulant des fonctionnalités communes dans des fonctions indépendantes. les hooks personnalisés favorisent la réutilisation, améliorent l'organisation des composants et améliorent globalement la maintenabilité du code.

Dans ce guide, nous aborderons les objectifs de l'utilisation d'un hook personnalisé, en comprenant les principes fondamentaux de la création d'un hook personnalisé et comment l'utiliser avec d'autres composants. nous illustrerons ensuite un exemple réel en créant un hook personnalisé d'API de récupération.

Comprendre les bases

généralement, les développeurs ont peur du terme hooks personnalisés, alors démystifions-le.

un hook personnalisé est simplement une fonction qui commence par le préfixe use (qui est crucial pour le fonctionnement des hooks personnalisés).
cette fonction consiste en une logique réutilisable qui utilise les hooks intégrés de React. vous envisagez généralement d'utiliser un hook personnalisé si vous avez la même logique sur plusieurs composants. Ainsi, en utilisant des hooks personnalisés, vous pouvez résoudre plusieurs problèmes tels que l'amélioration de l'organisation et de la maintenabilité du code.

Création d'un simple hook personnalisé

L'exemple ci-dessous est un simple hook personnalisé de compteur qui gère l'état du compte à l'aide du hook useState et met à jour le compte respectivement à l'aide de fonctions d'incrémentation ou de décrémentation qui définissent uniquement l'état du compte.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

félicitations, vous venez de créer vos propres hooks personnalisés, c'est assez simple. nous verrons ensuite comment utiliser ce crochet

Utilisation de hooks personnalisés dans les composants

l'utilisation de hooks personnalisés dans d'autres composants se fait simplement en détruisant les valeurs renvoyées par le hook personnalisé à l'intérieur d'autres composants

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
) } export default Page

Exemple concret d'utilisation d'un hook personnalisé

l'une des logiques les plus répétitives est de récupérer une API : un site de commerce électronique récupérera les données pour l'authentification, le processus de paiement, l'affichage de tous les produits, commentaires, avis... etc.

vous pouvez imaginer la quantité de logique de récupération répétitive dans l'application qui peut être simplifiée à l'aide d'un hook personnalisé.

dans cette section créera un hook de récupération personnalisé.

nous utiliserons les hooks React intégrés useState et useEffect
nous allons avoir un état pour les données, un état en attente au cas où nous voudrions afficher un spinner pendant la récupération des données et un état d'erreur en cas d'échec de la récupération.

le code ci-dessous est explicite. dans useEffect, nous définissons une fonction fetchData qui est asynchrone et qui gérera la logique de récupération. sous useEffect, le hook personnalisé renverra les valeurs suivantes qui peuvent être utilisées dans toutes les autres données de composants, en attente, erreur.

notez que nous transmettons une valeur d'URL au paramètre de hook personnalisé useFetch, ce qui signifie que les données peuvent être transmises à des hooks personnalisés

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

en utilisant le hook useFetch dans les composants Page, nous pouvons désormais afficher un message au client en cas d'erreur, afficher une double flèche pendant la récupération des données et enfin afficher les données au client.

ce composant peut être utilisé à plusieurs reprises dans toute l'application, ce qui réduit la quantité de code répétitif.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server
return( {pending ? ( ) : ( data.map((item) => (

{item.title}

{item.body}

) ) )} ) } export default Page;

Conclusion

Les hooks personnalisés offrent un mécanisme puissant pour encapsuler et réutiliser la logique dans les composants React. En extrayant des fonctionnalités communes dans des fonctions dédiées, vous pouvez améliorer l'organisation du code, améliorer la maintenabilité et promouvoir la réutilisation du code.

Nous avons exploré les principes fondamentaux de la création de hooks personnalisés, compris comment les utiliser dans les composants React et montré un exemple concret d'utilisation d'un hook personnalisé.

Déclaration de sortie Cet article est reproduit sur : https://dev.to/kada/reusing-logic-in-react-with-custom-hooks-a-practical-guide-4li1?1 En cas de violation, veuillez contacter study_golang@163 .com pour le supprimer
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3