React Hooks

React Hooks est une fonctionnalité importante introduite dans React 16.8. Elle permet aux composants fonctionnels de bénéficier de certaines fonctionnalités des composants de classe, telles que la gestion d'état et l'utilisation des méthodes de cycle de vie.

Avec les Hooks, vous pouvez écrire des composants React de manière plus concise et plus flexible.

1. Que sont les React Hooks ?

React Hooks est un mécanisme d'amélioration pour les composants fonctionnels qui vous permet d'utiliser les fonctionnalités de React sans écrire de composants de classe. Les principaux Hooks incluentuseState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, etuseImperativeHandleetc. Ces Hooks fournissent un moyen d'accéder aux fonctionnalités de React, ce qui vous permet de mieux organiser et réutiliser votre code.

2. Principaux Hooks React

useState

useStateLe Hook vous permet d'utiliser un état local dans les composants fonctionnels. Il renvoie une valeur d'état et une fonction pour mettre à jour cette valeur d'état.

Exemple

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi</button>
    </div>
  );
}

useEffect

useEffectLe Hook vous permet d'effectuer des opérations à effet de bord dans les composants fonctionnels (telles que la récupération de données, la gestion des abonnements, les opérations DOM, etc.). Il s'exécute après chaque rendu.

Exemple

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Un tableau vide comme deuxième paramètre signifie qu'il ne s'exécute que lorsque le composant est monté et démonté

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

Voici quelques principaux Hooks React et leurs utilisations :

useState - Utilisé pour ajouter un état dans les composants fonctionnels ; vous pouvez l'utiliser pour suivre des données qui changent au fil du temps.

const [state, setState] = useState(initialState);

useEffect- Utilisé pour effectuer des effets secondaires, tels que la récupération de données, les abonnements ou la modification manuelle du DOM. Il est similaire aux méthodes de cycle de vie componentDidMount, componentDidUpdate et componentWillUnmount des composants de classe.

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清理操作
  };
}, [dependencies]); // 依赖数组

useContext- Utilisé pour accéder aux données transmises via le contexte React dans l'arbre des composants, sans avoir à transmettre des props à travers chaque composant.

const value = useContext(MyContext);

useReducer- Utilisé pour une logique d'état plus complexe. Il prend une fonction reducer et un état initial, puis renvoie l'état actuel et une fonction dispatch pour envoyer des actions.

const [state, dispatch] = useReducer(reducer, initialState);

useCallback- Utilisé pour renvoyer une version mémoïsée d'une fonction de rappel afin d'éviter des rendus inutiles.

const memoizedCallback = useCallback(
  () => {
    // 回调函数体
  },
  [dependencies] // 依赖数组
);

useMemo- Utilisé pour mémoïser les résultats de calcul, en évitant des calculs répétés à chaque rendu.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef- Utilisé pour créer des références vers des éléments du DOM ou des valeurs, qui peuvent maintenir l'état entre les rendus.

const refContainer = useRef(initialValue);

useImperativeHandle- Utilisé pour exposer les méthodes des éléments DOM lors de l'utilisation de refs.

useImperativeHandle(ref, () => ({
  // 暴露的方法
}));
useLayoutEffect - 与 useEffect 类似，但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。

useLayoutEffect(() => {
  // 副作用操作
}, [dependencies]);

useDebugValue- Utilisé pour afficher une étiquette pour les hooks personnalisés dans les React Developer Tools.

useDebugValue(value);

3. Avantages de l'utilisation des React Hooks

  • Logique de composant plus concise: Plus besoin d'écrire des composants de classe ; vous pouvez utiliser des composants fonctionnels et des Hooks pour gérer l'état et le cycle de vie.
  • Meilleure réutilisabilité du code: Les Hooks peuvent vous aider à extraire la logique dans des fonctions réutilisables, réduisant ainsi le code dupliqué.
  • Meilleure optimisation des performances: UtilisezuseEffect, useCallback, useMemoet d'autres Hooks pour contrôler plus précisément les effets secondaires et les coûts de performance.

4. Remarques

  • N'utilisez les Hooks qu'au niveau supérieur: N'appelez pas les Hooks dans des boucles, des conditions ou des fonctions imbriquées. Assurez-vous que les Hooks sont appelés dans le même ordre à chaque rendu.
  • Utilisez le plugin ESLint: React fournit officiellement le plugin eslint-plugin-react-hooks pour vous aider à vérifier si les Hooks sont utilisés correctement.

5. Exemple

Voici un exemple qui utilise plusieurs React Hooks :

Exemple

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

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

  useEffect(() => {
    document.title = `Vous avez cliqué ${count} fois`;
  }, [count]); // Mettre à jour le titre uniquement lorsque count change

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi</button>
    </div>
  );
}

export default Exemple;

Dans le code ci-dessus, nous avons utilisé useState pour gérer l'état count, useEffect pour mettre à jour le titre de la page, et un simple bouton pour augmenter count.

Avec les Hooks, vous pouvez écrire du code de composant plus propre et plus réutilisable.

Les Hooks facilitent également le test de la logique des composants, car vous pouvez tester la logique de chaque hook individuellement sans l'encapsuler dans un composant.

De plus, les Hooks prennent en charge la personnalisation. Vous pouvez écrire vos propres Hooks pour encapsuler une logique complexe, puis les réutiliser dans plusieurs composants.

Autres extensions