Élevez votre jeu React avec des hooks personnalisés : un guide amusant et pratique

Salut, amis passionnés de React ! Si vous êtes comme moi, vous aimez la façon dont React facilite la création d'interfaces utilisateur. Mais parfois, nous nous retrouvons à répéter la même logique entre différents composants. C'est là qu'interviennent les hooks personnalisés : ils sont comme des super pouvoirs secrets qui rendent notre code plus propre et plus efficace. Plongeons dans le monde des hooks personnalisés et voyons comment ils peuvent améliorer notre jeu React.

De toute façon, que sont les crochets ?

Tout d’abord, faisons un bref récapitulatif de ce que sont les crochets. Introduits dans React 16.8, les hooks vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Certains des hooks intégrés les plus populaires sont useState, useEffect et useContext.

Exemple de crochet intégré

importer React, {useState, useEffect } depuis 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Dans cet exemple simple, useState et useEffect travaillent ensemble pour gérer l'état et les effets secondaires. C’est propre, c’est simple et c’est puissant.

Pourquoi devriez-vous vous soucier des crochets personnalisés ?

Les crochets personnalisés sont axés sur la réutilisation et le maintien de la propreté de vos composants. Ils vous permettent d'extraire et de partager la logique entre les composants. Considérez-les comme votre boîte à outils personnelle, dans laquelle vous pouvez stocker des fonctions pratiques et les utiliser chaque fois que vous en avez besoin.

Avantages des crochets personnalisés

• Réutilisabilité : Écrivez une fois, utilisez partout. Partagez la logique entre différents composants sans dupliquer le code.
• Lisibilité : Gardez vos composants concentrés sur le rendu, ce qui les rend plus faciles à lire et à maintenir.
• Maintenabilité : mise à jour de la logique en un seul endroit, et cela se reflète partout où le hook est utilisé.

Créons ensemble un hook personnalisé

Imaginez que vous ayez plusieurs composants qui doivent récupérer des données à partir d'une API. Au lieu d'écrire la même logique de récupération dans chaque composant, vous pouvez créer un hook personnalisé pour la gérer. Créons useFetch.

Étape par étape : création de useFetch

1. Créer le Hook : Commencez par créer un nouveau fichier nommé useFetch.js.

import { useState, useEffect } from 'react';

    function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. Utilisez le Hook : Maintenant, utilisons useFetch dans un composant.

import React from 'react';
    import useFetch from './useFetch';

    function DataFetchingComponent() {
      const { data, loading, error } = useFetch('https://api.example.com/data');

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {error.message}</p>;

      return (
        <div>
          <h1>Data</h1>
          <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); } export default DataFetchingComponent;

Copier après la connexion

Le décomposer

• Gestion des états : useFetch gère les données, le chargement et les états d'erreur.
• Effect Hook : useEffect déclenche la récupération des données lorsque le composant est monté ou que l'URL change.
• Async Logic : La fonction fetchData gère l'appel API et met à jour l'état en conséquence.

Mise à niveau avec des crochets personnalisés avancés

Les crochets personnalisés peuvent être aussi simples ou aussi complexes que vous en avez besoin. Montons d'un cran avec un hook pour gérer les entrées de formulaire : useForm.

Création d'un formulaire d'utilisation

import { useState } from 'react';

    function useForm(initialValues) {
      const [values, setValues] = useState(initialValues);

      const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
          ...values,
          [name]: value,
        });
      };

      const resetForm = () => {
        setValues(initialValues);
      };

      return { values, handleChange, resetForm };
    }

    export default useForm;


### Using `useForm`

    import React from 'react';
    import useForm from './useForm';

    function FormComponent() {
      const { values, handleChange, resetForm } = useForm({ username: '', email: '' });

      const handleSubmit = (event) => {
        event.preventDefault();
        console.log(values);
        resetForm();
      };

      return (
        <form onSubmit={handleSubmit}>
          <label>
            Username:
            <input type="text" name="username" value={values.username} onChange={handleChange} />
          </label>
          <br />
          <label>
            Email:
            <input type="email" name="email" value={values.email} onChange={handleChange} />
          </label>
          <br />
          <button type="submit">Submit</button>
        </form>
      );
    }

    export default FormComponent;

• Gestion de l'état : useForm utilise useState pour gérer les valeurs d'entrée du formulaire.
• Change Handler : handleChange met à jour l'état en fonction de la saisie de l'utilisateur.
• Fonction de réinitialisation : resetForm réinitialise le formulaire à ses valeurs initiales.

Les hooks personnalisés sont un moyen incroyable de rendre votre code React plus modulaire, lisible et maintenable. En extrayant la logique commune dans des hooks personnalisés, vous gardez vos composants concentrés sur ce qu'ils font le mieux : le rendu de l'interface utilisateur.

Commencez à expérimenter des hooks personnalisés dans vos projets. Croyez-moi, une fois que vous aurez commencé à les utiliser, vous vous demanderez comment vous avez pu vivre sans eux. Bon codage !

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!