Réagir aux crochets

Les React Hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React dans des composants fonctionnels, qui n'étaient traditionnellement disponibles que dans les composants de classe. Ils ont été introduits dans React 16.8 et sont depuis devenus un standard pour l'écriture de composants React. Voici une liste des crochets les plus couramment utilisés :

1. useState

• Objectif : Gère l'état des composants fonctionnels.
• Utilisation :

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

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

• Explication : useState renvoie un tableau avec deux éléments : la valeur de l'état actuel (count) et une fonction pour la mettre à jour (setCount). Cela vous permet de maintenir et de mettre à jour l'état au sein d'un composant fonctionnel.

2. useEffect

• Objectif : gère les effets secondaires tels que la récupération de données, les abonnements ou la modification manuelle du DOM dans les composants fonctionnels.
• Utilisation :

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• Explication : useEffect prend deux arguments : une fonction pour exécuter l'effet et un tableau de dépendances facultatif. La fonction d'effet s'exécute après le rendu du composant. Si vous fournissez un tableau de dépendances, l'effet ne s'exécutera que lorsque ces dépendances changeront.

3. useContext

• Objectif : Accède à la valeur d'un contexte au sein d'un composant fonctionnel.
• Utilisation :

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

• Explication : useContext vous permet de consommer des valeurs de contexte directement dans des composants fonctionnels sans avoir besoin d'un composant Consumer.

4. utiliserRéducteur

• Objectif : Gère la logique d'état complexe dans les composants fonctionnels, agissant comme une alternative à useState.
• Utilisation :

  import React, { useReducer } from 'react';

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        return state;
    }
  }

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

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

• Explication : useReducer est utile pour gérer un état qui dépend d'une logique plus complexe ou de plusieurs actions. Il prend une fonction réductrice et un état initial et renvoie l'état actuel et une fonction de répartition.

5. useRef

• Objectif : accède et stocke une référence mutable à un élément ou une valeur DOM qui persiste dans les rendus.
• Utilisation :

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• Explication : useRef renvoie un objet mutable avec une propriété .current qui peut contenir une valeur ou une référence à un élément DOM. Cette valeur persiste à travers les rendus sans déclencher de nouveaux rendus lors de la mise à jour.

6. useMemo et useCallback

• Objectif : Optimiser les performances en mémorisant des calculs ou des fonctions coûteuses.
• Utilisation :

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• Explication : useMemo mémorise une valeur calculée, la recalculant uniquement lorsque ses dépendances changent. useCallback mémorise une fonction, garantissant qu'elle n'est redéfinie que lorsque ses dépendances changent.

Pourquoi les crochets sont utiles

• Cleaner Code : les hooks vous permettent d'écrire du code plus propre et plus lisible sans avoir besoin de composants de classe.
• Réutilisabilité : les hooks peuvent être réutilisés sur différents composants ou même partagés entre projets.
• Logique avec état dans les composants fonctionnels : les hooks vous permettent de gérer l'état et les effets secondaires des composants fonctionnels, les rendant aussi puissants que les composants de classe.

Les hooks ont transformé la façon dont les développeurs écrivent des applications React, rendant les composants fonctionnels plus performants et plus faciles à gérer.

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!