Hooks personnalisés dans React : réutilisation de la logique entre les composants

Hooks personnalisés dans React

Un Custom Hook est une fonction JavaScript qui vous permet de réutiliser la logique avec état sur plusieurs composants dans une application React. Les hooks personnalisés sont un outil puissant pour encapsuler la logique qui peut être partagée entre les composants, en gardant les composants propres et en favorisant la réutilisabilité du code.

Les hooks personnalisés sont préfixés par use, pour suivre la convention de React, et peuvent utiliser d'autres hooks à l'intérieur (tels que useState, useEffect, useContext, etc.).

---

Pourquoi utiliser des crochets personnalisés ?

Les crochets personnalisés offrent plusieurs avantages :

1. Réutilisabilité du code : Ils vous permettent d'extraire une logique réutilisable de vos composants. Si vous avez une logique qui doit être partagée entre plusieurs composants, vous pouvez l'extraire dans un hook personnalisé.
2. Séparation des préoccupations : en supprimant la logique complexe des composants, les hooks personnalisés peuvent aider à garder les composants plus concentrés sur le rendu de l'interface utilisateur, ce qui améliore la lisibilité et la maintenabilité.
3. Abstraction : ils fournissent un moyen d'abstraire une logique complexe, rendant vos composants plus propres et plus faciles à comprendre.

---

Comment créer un crochet personnalisé

Pour créer un hook personnalisé, suivez ces étapes :

1. Écrivez une fonction : La fonction doit contenir la logique que vous souhaitez réutiliser.
2. Utiliser des hooks intégrés : à l'intérieur de la fonction, vous pouvez utiliser d'autres hooks React tels que useState, useEffect ou tout autre hook pour gérer l'état ou les effets secondaires.
3. Valeurs de retour : renvoie l'état, les fonctions ou les valeurs nécessaires du hook personnalisé à utiliser dans le composant.

---

Exemple de base d'un crochet personnalisé

Voici un exemple simple de hook personnalisé qui gère la position de la souris :

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Explication :

• Le hook personnalisé useMousePosition suit la position de la souris sur l'écran.
• Il utilise useState pour gérer l'état des coordonnées de la souris (x et y).
• Il utilise useEffect pour ajouter un écouteur d'événement pour l'événement mousemove et le nettoie lorsque le composant est démonté ou que l'effet est réexécuté.
• Le hook renvoie la position de la souris (x et y), qui peut être utilisée par n'importe quel composant qui importe et appelle useMousePosition.

---

Utilisation du hook personnalisé dans un composant

Maintenant, vous pouvez utiliser ce hook personnalisé dans n'importe quel composant pour accéder à la position de la souris :

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Explication :

• Le composant MouseTracker utilise le hook personnalisé useMousePosition pour accéder à la position de la souris.
• Chaque fois que la souris est déplacée, la position est mise à jour et le composant est restitué pour afficher les nouvelles coordonnées.

---

Exemple avancé : crochet personnalisé pour la gestion des formulaires

Vous pouvez créer des hooks personnalisés pour une logique plus complexe, comme la gestion des formulaires.

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

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

  return (
    <div>
      <h2>Mouse Position:</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
};

export default MouseTracker;

Explication :

• Le hook useFormInput prend une valeur initiale et renvoie la valeur d'entrée et une fonction handleChange.
• Le hook peut être utilisé dans n'importe quel composant de formulaire pour gérer l'état de saisie du formulaire.

---

Utilisation du Form Hook dans un composant

Maintenant, vous pouvez utiliser useFormInput dans un composant de formulaire :

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

Explication :

• Le hook useFormInput est utilisé pour gérer les événements d'état et de modification pour les entrées de nom et d'e-mail.
• La fonction handleSubmit enregistre les valeurs du formulaire lorsque le formulaire est soumis.

---

Règles pour les crochets personnalisés

Les hooks personnalisés suivent les mêmes règles que les hooks React :

1. Appelez uniquement les hooks au niveau supérieur : n'appelez pas les hooks de manière conditionnelle ou à l'intérieur des boucles.
2. Appelez uniquement les hooks à partir des fonctions React : les hooks personnalisés ne peuvent être appelés qu'à partir de composants fonctionnels React ou d'autres hooks personnalisés.
3. Commencer par use : les hooks personnalisés doivent commencer par le préfixe use pour les différencier des fonctions JavaScript classiques.

---

Utiliser des crochets personnalisés pour les effets secondaires

Les hooks personnalisés peuvent également être utilisés pour gérer les effets secondaires, comme la récupération de données.

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

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Explication :

• useFetchData est un hook personnalisé qui récupère les données d'une API.
• Il gère les données, isLoading et les états d'erreur.
• Le hook est réutilisable dans tout composant qui doit récupérer des données à partir d'une API.

---

Utilisation du hook de récupération de données dans un composant

Voici comment utiliser le hook useFetchData dans un composant :

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Explication :

• Le DataComponent utilise le hook personnalisé useFetchData pour récupérer les données de l'API.
• Le composant gère le chargement, les erreurs et l'affichage des données récupérées en fonction de l'état renvoyé par le hook personnalisé.

---

Résumé des hooks personnalisés

• Les Hooks personnalisés vous permettent d'encapsuler et de réutiliser la logique dans votre application React.
• Ils aident à garder vos composants propres en éliminant la logique complexe.
• Les hooks personnalisés peuvent utiliser des hooks intégrés comme useState, useEffect et autres, et ils suivent les mêmes règles que les hooks React.
• Les cas d'utilisation courants des hooks personnalisés incluent la gestion des entrées de formulaire, la récupération de données, la gestion des effets secondaires, etc.

---

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!