React Hooks dengan Contoh

Introduction : Adopter la puissance des crochets React

Salut, collègue développeur d'interface utilisateur ! Êtes-vous prêt à plonger dans le monde passionnant de React Hooks ? Si vous travaillez avec React depuis un certain temps, vous vous souvenez peut-être de l'époque où les composants de classe étaient la solution privilégiée pour gérer l'état et les effets secondaires. Mais les temps ont changé et les React Hooks ont révolutionné la façon dont nous construisons des composants.

Dans ce guide convivial, nous explorerons 10 React Hooks essentiels, accompagnés d'exemples de didacticiels pour vous aider à les comprendre et à les mettre en œuvre dans vos projets. Que vous soyez nouveau sur Hooks ou que vous cherchiez à approfondir vos connaissances, cet article est là pour vous. Alors, prenez votre boisson préférée, installez-vous confortablement et embarquons ensemble dans cette aventure React Hooks !

1. useState : gérer l'état en toute simplicité

Commençons par le Hook le plus couramment utilisé : useState. Ce petit bijou vous permet d'ajouter un état à vos composants fonctionnels sans avoir besoin de classes.

Comment ça marche

Le useState Hook renvoie un tableau avec deux éléments : la valeur de l'état actuel et une fonction pour la mettre à jour. Voici un exemple simple :

import React, { useState } from 'react';

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

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

Dans cet exemple, nous créons un compteur qui augmente à chaque fois que vous cliquez sur le bouton. Le useState Hook initialise notre compte à 0 et nous utilisons la fonction setCount pour le mettre à jour.

Quand utiliser useState

• Quand vous avez besoin de gérer l'état local dans un composant fonctionnel
• Pour les types de données simples comme les nombres, les chaînes ou les booléens
• Lorsque vous souhaitez éviter la complexité des composants de classe pour la gestion de base de l'état

2. useEffect : gestion des effets secondaires

La prochaine étape est useEffect, le Hook qui vous permet d'effectuer des effets secondaires dans vos composants. C'est comme composantDidMount, composantDidUpdate et composantWillUnmount tous réunis en un !

Comment ça marche

useEffect prend deux arguments : une fonction à exécuter après le rendu et un tableau facultatif de dépendances. Voici un exemple :

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

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);

    // Cleanup function
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty dependency array means this effect runs once on mount

  return <div>Window width: {width}px</div>;
}

Dans cet exemple, nous utilisons useEffect pour ajouter un écouteur d'événement pour le redimensionnement de la fenêtre. La fonction de nettoyage supprime l'écouteur lorsque le composant est démonté.

Quand utiliser useEffect

• Pour la récupération de données
• Configuration des abonnements ou des auditeurs d'événements
• Changer manuellement le DOM
• Journalisation ou tout autre effet secondaire qui n'a pas d'impact direct sur le rendu

3. useContext : consommer le contexte en toute simplicité

Le hook useContext fournit un moyen de consommer du contexte dans des composants fonctionnels sans avoir besoin d'accessoires de rendu ou de composants d'ordre supérieur.

Comment ça marche

Tout d'abord, vous créez un contexte à l'aide de React.createContext(), puis utilisez le hook useContext pour le consommer :

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I'm styled by theme context!</button>;
}

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

Dans cet exemple, ThemedButton utilise le hook useContext pour accéder à la valeur actuelle du thème à partir de ThemeContext.

Quand utiliser useContext

• Quand vous avez besoin de partager des données qui peuvent être considérées comme « globales » pour une arborescence de composants React
• Pour éviter le perçage d'accessoires (passage d'accessoires à travers plusieurs niveaux de composants)
• Pour le thème, l'authentification des utilisateurs ou toute autre donnée à l'échelle de l'application

4. useReducer : gestion de la logique d'état complexe

Quand useState ne suffit pas, useReducer vient à la rescousse. C'est particulièrement utile pour gérer une logique d'état plus complexe.

Comment ça marche

useReducer prend une fonction de réduction et un état initial, et renvoie l'état actuel associé à une méthode de répartition :

import React, { useReducer } from 'react';

const initialState = {count: 0};

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Dans cet exemple, nous utilisons useReducer pour gérer un compteur avec des actions d'incrémentation et de décrémentation.

Quand utiliser useReducer

• Lorsque vous avez une logique d'état complexe qui implique plusieurs sous-valeurs
• Quand l'état suivant dépend du précédent
• Lorsque vous souhaitez optimiser les performances des composants qui déclenchent des mises à jour approfondies

5. useCallback : optimisation des performances

Le hook useCallback peut vous aider à optimiser les performances de vos composants en mémorisant les fonctions de rappel.

Comment ça marche

useCallback renvoie une version mémorisée du rappel qui ne change que si l'une des dépendances a changé :

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <ChildComponent onIncrement={increment} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onIncrement }) {
  console.log('ChildComponent rendered');
  return <button onClick={onIncrement}>Increment</button>;
}

Dans cet exemple, la fonction d'incrémentation est mémorisée avec useCallback, évitant ainsi les rendus inutiles de ChildComponent.

When to use useCallback

• When passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders
• In combination with useMemo for creating memoized callbacks

6. useMemo: Memoizing Expensive Computations

Similar to useCallback, useMemo is used for optimization, but it memoizes the result of a computation.

How it works

useMemo takes a function and an array of dependencies, and only recomputes the memoized value when one of the dependencies has changed:

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

function ExpensiveComponent({ list }) {
  const [filter, setFilter] = useState('');

  const filteredList = useMemo(() => {
    console.log('Filtering list...');
    return list.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
  }, [list, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Filter list"
      />
      <ul>
        {filteredList.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, we're using useMemo to memoize the filtered list, preventing unnecessary recalculations on every render.

When to use useMemo

• For expensive calculations that don't need to be re-run on every render
• When you want to avoid re-rendering child components unnecessarily
• For referential equality checks in other Hooks' dependency arrays

7. useRef: Accessing DOM Elements and Storing Mutable Values

The useRef Hook provides a way to create a mutable reference that persists across re-renders.

How it works

useRef returns a mutable ref object whose .current property is initialized to the passed argument:

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

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

In this example, we're using useRef to get a reference to the input element and focus it when the component mounts.

When to use useRef

• To access DOM elements directly
• For storing mutable values that don't cause re-renders when updated
• For keeping track of previous values in functional components

8. useImperativeHandle: Customizing Instance Value

useImperativeHandle customizes the instance value that is exposed to parent components when using ref.

How it works

useImperativeHandle should be used with forwardRef:

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return <input ref={inputRef} />;
});

function Parent() {
  const fancyInputRef = useRef();

  const handleClick = () => {
    fancyInputRef.current.focus();
    console.log(fancyInputRef.current.getValue());
  };

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

In this example, we're using useImperativeHandle to customize what instance value is exposed to the parent component.

When to use useImperativeHandle

• When you want to customize the exposed instance value of a forwardRef component
• To limit the exposed functionality of a child component to its parent

9. useLayoutEffect: Synchronous Effect Hook

useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations.

How it works

The signature is identical to useEffect, but it fires synchronously before the browser has a chance to paint:

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

function Tooltip() {
  const [tooltipHeight, setTooltipHeight] = useState(0);
  const tooltipRef = useRef();

  useLayoutEffect(() => {
    const height = tooltipRef.current.clientHeight;
    setTooltipHeight(height);
  }, []);

  return (
    <div>
      <div ref={tooltipRef}>Tooltip content</div>
      <p>The tooltip height is: {tooltipHeight}px</p>
    </div>
  );
}

In this example, we're using useLayoutEffect to measure the height of a DOM element synchronously before the browser paints.

When to use useLayoutEffect

• When you need to make DOM measurements or mutations that should be applied synchronously before the browser paints
• For animations that require measurements of DOM elements
• When you want to avoid flickering caused by asynchronous updates

10. useDebugValue: Labeling Custom Hooks for DevTools

Last but not least, useDebugValue can be used to display a label for custom hooks in React DevTools.

How it works

useDebugValue accepts a value and an optional formatting function:

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

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ... Logic to determine if the friend is online ...

  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

In this example, we're using useDebugValue to display the friend's online status in React DevTools.

When to use useDebugValue

• In custom Hooks to provide more context about the Hook's state
• For debugging complex custom Hooks
• To improve the developer experience when working with custom Hooks

Conclusion: Mastering React Hooks

Wow, we've covered a lot of ground! From managing state with useState to optimizing performance with useMemo and useCallback, React Hooks offer a powerful and flexible way to build UI components. Let's recap the 10 Hooks we've explored:

1. useState: For managing local state
2. useEffect: For handling side effects
3. useContext: For consuming context
4. useReducer: For managing complex state logic
5. useCallback: For optimizing performance of callbacks
6. useMemo: For memoizing expensive computations
7. useRef: For accessing DOM elements and storing mutable values
8. useImperativeHandle: For customizing instance value
9. useLayoutEffect: For synchronous effect execution
10. useDebugValue: For labeling custom Hooks in DevTools

Remember, the key to mastering React Hooks is practice. Start by incorporating them into your projects one at a time. As you become more comfortable, you'll find that Hooks can significantly simplify your code and make your components more reusable and easier to understand.

Jangan takut untuk mencuba dan menggabungkan Cangkuk yang berbeza untuk menyelesaikan masalah yang rumit. Komuniti React sentiasa menghasilkan corak baharu dan Cangkuk tersuai, jadi teruskan belajar dan berkongsi penemuan anda!

Saya harap panduan mesra ini telah membantu anda memahami dengan lebih baik tentang React Hooks. Selamat membuat pengekodan, dan semoga komponen anda berfungsi selama-lamanya dan sedap kait!

"Hooks ialah tambahan baharu dalam React 16.8. Mereka membenarkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas." - Dokumentasi React

Sekarang pergi dan sambungkannya! ??

Atas ialah kandungan terperinci React Hooks dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!