Les essentiels de React Hooks

Points forts du concept :

1. Qu'est-ce que Hooks ?
2. Pourquoi utiliser des crochets ?
3. useState
4. useEffect
5. useReducer
6. useRef
7. Crochets personnalisés
8. Basculer avec répartition
9. Qu'est-ce que UseHooks.com ?

1. Qu'est-ce que les crochets et pourquoi

Dans React, les Hooks sont des fonctions spéciales qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React dans des composants fonctionnels, sans avoir besoin de les convertir en composants de classe. Introduits dans React 16.8, les hooks facilitent la réutilisation de la logique entre les composants, gèrent la gestion des états et gèrent les effets secondaires tels que la récupération de données ou les abonnements, le tout au sein de composants fonctionnels.

2. Pourquoi utiliser des crochets ?

• Cleaner Code : Les hooks simplifient la structure de vos composants en vous permettant de gérer l'état et les effets secondaires directement dans les composants fonctionnels.
• Réutilisabilité : Les hooks personnalisés vous permettent de réutiliser la logique avec état sans dupliquer le code ni restructurer les composants.
• Composants fonctionnels : Les hooks vous permettent d'écrire des composants fonctionnels tout aussi puissants que les composants de classe, conduisant à une base de code plus cohérente.

3. utiliserÉtat

Le hook useState est fondamental pour gérer l’état des composants fonctionnels. Au lieu d'utiliser des composants de classe avec this.setState(), vous pouvez gérer l'état de manière transparente avec ce hook.

Syntaxe :

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

par exemple) Dans cet exemple, il initialise le compte avec une valeur de 0 et utilise la fonction setCount pour le mettre à jour lorsque vous cliquez sur le bouton.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. utiliserEffet

Le hook useEffect vous permet de gérer les effets secondaires dans vos composants, comme la récupération de données, la mise à jour du DOM ou l'abonnement à des événements.

Syntaxe :

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);

par exemple) Dans cet exemple, useEffect récupère les données d'une API lors du montage du composant. Le tableau vide [] comme deuxième argument garantit que l'effet ne s'exécute qu'une seule fois (comme ComponentDidMount).

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

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

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

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

5. utiliserRéducteur

Lorsque votre logique d'état devient plus complexe, envisagez d'utiliser useReducer au lieu de useState. C'est similaire à Redux mais au niveau des composants. Vous pouvez l'utiliser pour gérer les transitions d'état en fonction des types d'actions.

Syntaxe :

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

par exemple) Dans cet exemple, useReducer gère deux actions : incrémenter et décrémenter. Vous utilisez la répartition pour déclencher des mises à jour d'état en fonction de ces actions.

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:
      return state;
  }
}

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

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

6. utiliserRef

Le hook useRef fournit un moyen d'accéder et de manipuler directement les éléments DOM ou de stocker des valeurs mutables dans les rendus sans provoquer de nouveaux rendus.

Syntaxe :

const myRef = useRef(initialValue);

par exemple) Dans cet exemple, useRef permet un accès direct au champ d'entrée, permettant de le focaliser par programme lorsque vous cliquez sur le bouton.

import React, { useRef } from 'react';

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

7. Crochets personnalisés

L'un des aspects puissants des hooks est que vous pouvez créer vos hooks personnalisés pour encapsuler et réutiliser la logique entre les composants. Les hooks personnalisés commencent par l'utilisation et ne sont que des fonctions JavaScript classiques qui peuvent utiliser d'autres hooks.

par exemple) Dans cet exemple, le hook useFetch gère la logique de récupération de données et peut être réutilisé dans plusieurs composants.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

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

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}

8. Basculer avec expédition

La méthode de répartition peut être utilisée en combinaison avec useReducer pour créer des états à bascule, ce qui est utile pour gérer des composants tels que les modaux, les listes déroulantes ou le basculement de thèmes.

par exemple) L'action de bascule dans la méthode de répartition fait basculer l'état isVisible entre vrai et faux, ce qui à son tour bascule la visibilité du contenu.

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}

9. Qu'est-ce que UseHooks.com ?

Si vous souhaitez approfondir vos connaissances sur les hooks ou explorer des hooks personnalisés utiles pour vos projets, je vous recommande vivement de consulter UseHooks.com. C'est une ressource fantastique avec des tonnes de crochets personnalisés pratiques que vous pouvez utiliser et dont vous pouvez apprendre.

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!