Niveau junior : méthodes de cycle de vie et hooks dans React

Les React Hooks ont révolutionné la façon dont nous écrivons des composants fonctionnels dans React, nous permettant d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Ce guide vous présentera les hooks essentiels, les hooks personnalisés et les modèles de hook avancés pour gérer les états complexes et optimiser les performances.

Introduction aux crochets React

Les React Hooks sont des fonctions qui vous permettent de vous « connecter » à l'état et aux fonctionnalités de cycle de vie de React à partir de composants fonctionnels. Les hooks ont été introduits dans React 16.8 et offrent un moyen plus direct d'utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels.

Principaux avantages des crochets

1. Code plus simple : Les hooks vous permettent d'utiliser des méthodes d'état et de cycle de vie directement dans les composants fonctionnels, conduisant à un code plus simple et plus lisible.
2. Réutiliser la logique : Les hooks personnalisés vous permettent d'extraire et de réutiliser la logique avec état sur plusieurs composants.
3. Composants fonctionnels améliorés : Les hooks fournissent toute la puissance des composants de classe, comme la gestion de l'état et des effets secondaires, sans avoir besoin d'utiliser des classes.

Crochets essentiels

utiliserÉtat

useState est un hook qui vous permet d'ajouter un état aux composants fonctionnels.

Exemple :

import React, { useState } from 'react';

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

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

export default Counter;

Dans cet exemple, useState initialise la variable d'état count à 0. La fonction setCount met à jour l'état lorsque vous cliquez sur le bouton.

utiliserEffet

useEffect est un hook qui vous permet d'effectuer des effets secondaires dans des composants fonctionnels, tels que la récupération de données, l'interaction directe avec le DOM et la configuration d'abonnements. Il combine les fonctionnalités de plusieurs méthodes de cycle de vie dans les composants de classe (componentDidMount, composantDidUpdate et composantWillUnmount).

Exemple :

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Copier après la connexion

Dans cet exemple, useEffect récupère les données d'une API lors du montage du composant.

utiliserContext

useContext est un hook qui vous permet d'accéder à la valeur du contexte pour un contexte donné.

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>;
};

export default ThemedComponent;

Dans cet exemple, useContext accède à la valeur actuelle de ThemeContext.

utiliserRéducteur

useReducer est un hook qui vous permet de gérer une logique d'état complexe dans un composant fonctionnel. C'est une alternative à useState.

Exemple :

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (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(reducer, initialState);

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

export default Counter;

Dans cet exemple, useReducer gère l'état du comptage avec une fonction de réduction.

Crochets personnalisés

Les hooks personnalisés vous permettent de réutiliser la logique avec état sur plusieurs composants. Un hook personnalisé est une fonction qui utilise des hooks intégrés.

Exemple :

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Copier après la connexion