Comprendre les hooks React : un guide pour le développement React moderne

Que sont les hooks dans React ?

Les

Hooks sont des fonctions qui permettent aux développeurs de « se connecter » aux fonctionnalités d'état et de cycle de vie de React à partir de composants fonctionnels. Ils ont été introduits dans React 16.8 pour permettre aux développeurs d'utiliser l'état, le contexte et d'autres fonctionnalités de React dans les composants fonctionnels sans avoir besoin de les convertir en composants de classe. Avant les hooks, les composants de classe étaient le seul moyen de gérer l'état, les méthodes de cycle de vie et d'autres fonctionnalités dans React.

Les Hooks offrent un moyen plus concis, lisible et réutilisable de gérer la logique de l'état et du cycle de vie des composants fonctionnels. En tirant parti des hooks, les développeurs React peuvent écrire des composants plus simples, plus modulaires et plus faciles à tester.

---

1. Principaux types de crochets

1.1. utiliserState Hook

Le hook useState est le hook le plus basique, et il vous permet d'ajouter un état à vos composants fonctionnels. Il renvoie un tableau contenant la valeur de l'état actuel et une fonction pour mettre à jour cette valeur.

Exemple :

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState prend la valeur de l'état initial comme argument (dans ce cas, 0) et renvoie un tableau avec la variable d'état (count) et la fonction pour la mettre à jour (setCount).

1.2. utiliserEffet Hook

Le hook useEffect vous permet d'effectuer des effets secondaires dans vos composants de fonction. Ces effets secondaires peuvent inclure des opérations telles que la récupération de données, l'abonnement à des événements ou la modification manuelle du DOM. Il remplace les méthodes de cycle de vie des composants de classe tels que composantDidMount, composantDidUpdate et composantWillUnmount.

Exemple :

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect s'exécute après chaque rendu par défaut. Cependant, vous pouvez passer un deuxième argument — un tableau de dépendances — pour contrôler le moment où l'effet s'exécute. Si le tableau de dépendances est vide, l'effet ne s'exécute qu'une seule fois lors du montage du composant.

1.3. useContext Hook

Le hook useContext vous permet d'accéder à la valeur de contexte pour un objet Context donné. Ceci est utile pour transmettre des données à travers l'arborescence des composants sans avoir besoin de transmettre manuellement des accessoires à chaque niveau.

Exemple :

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext est utilisé pour accéder à la valeur de ThemeContext dans ThemedComponent sans transmettre manuellement le prop de thème.

1.4. utiliser le crochet réducteur

Le hook useReducer est une alternative à useState lorsque vous devez gérer une logique d'état plus complexe, en particulier lorsque l'état suivant dépend du précédent. Cela fonctionne de la même manière que les réducteurs dans Redux.

Exemple :

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer prend une fonction de réduction et un état initial comme arguments, et renvoie l'état actuel et une fonction de répartition pour envoyer des actions au réducteur.

1.5. utiliserCallback Hook

Le hook useCallback renvoie une version mémorisée d'une fonction qui ne change que si l'une des dépendances a changé. Cela peut aider à optimiser les performances en évitant les recréations inutiles de fonctions, en particulier lors de leur transmission en tant qu'accessoires aux composants enfants.

Exemple :

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback empêche la recréation de la fonction handleClick à chaque rendu, optimisant ainsi les performances, en particulier dans les grandes applications.

1.6. utiliserMemo Hook

Le hook useMemo est similaire à useCallback, mais il renvoie une valeur mémorisée au lieu d'une fonction mémorisée. Il permet d'optimiser les performances en recalculant les valeurs uniquement lorsque cela est nécessaire.

Exemple :

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

• useMemo permet d'éviter des calculs coûteux en mémorisant le résultat du calcul jusqu'à ce que les dépendances pertinentes (dans ce cas, le nombre) changent.

---

2. Avantages des crochets

1. Code plus simple et plus concis

Les hooks vous permettent d'utiliser l'état et d'autres fonctionnalités dans des composants fonctionnels sans écrire de composants basés sur les classes, ce qui entraîne moins de code passe-partout et des composants plus lisibles.

2. Meilleure réutilisabilité

Avec les hooks, vous pouvez extraire la logique des composants dans des hooks personnalisés, ce qui facilite le partage de la logique entre différents composants sans dupliquer le code.

3. Plus de mot-clé "ce"

Étant donné que les hooks sont utilisés dans les composants fonctionnels, vous n'avez pas à vous soucier du mot-clé this, qui est une source courante de confusion dans les composants de classe.

4. Organisation du code améliorée

Les crochets vous permettent de conserver la logique associée ensemble. Par exemple, vous pouvez utiliser useEffect pour les effets secondaires et useState pour gérer l'état, le tout au sein du même composant, ce qui facilite le raisonnement.

---

3. Conclusion

Les

Hooks sont une fonctionnalité puissante de React qui permet aux développeurs d'utiliser l'état, les méthodes de cycle de vie et d'autres fonctionnalités de React dans les composants fonctionnels. En utilisant des hooks comme useState, useEffect, useContext et useReducer, les développeurs React peuvent écrire du code plus propre, plus maintenable et modulaire. Les hooks rendent les composants fonctionnels plus puissants et permettent l'utilisation de fonctionnalités modernes telles que l'état et les effets secondaires sans la complexité des composants de classe.

---

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!