Crochet UseState et UseEffect dans React

Dans React, useState et useEffect sont deux hooks fondamentaux utilisés pour gérer l'état et gérer les effets secondaires dans les composants fonctionnels.

1. utiliserState Hook

Le hook useState vous permet d'ajouter un état aux composants fonctionnels. Il renvoie un tableau avec deux éléments :

1. La valeur de l'état actuel.
2. Une fonction pour mettre à jour cette valeur d'état.

Exemple :

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Dans cet exemple :

• useState(0) initialise la variable d'état count avec une valeur de 0.
• setCount est utilisé pour mettre à jour l'état lorsque le bouton est cliqué.

2. Utiliser le crochet d'effet

Le hook useEffect vous permet d'effectuer des effets secondaires dans vos composants, tels que la récupération de données, les abonnements ou la modification manuelle du DOM. Il faut deux arguments :

1. Une fonction qui contient la logique des effets secondaires.
2. Un tableau facultatif de dépendances qui détermine quand l'effet doit s'exécuter.

Exemple :

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

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

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

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

export default Example;

Dans cet exemple :

• useEffect met à jour le titre du document chaque fois que le nombre change.
• L'effet s'exécute après chaque rendu si le nombre change, car le nombre est inclus dans le tableau de dépendances.
• La fonction de nettoyage facultative s'exécute avant que l'effet ne s'exécute à nouveau ou lorsque le composant se démonte, ce qui est utile pour nettoyer les abonnements ou les minuteries.

Les deux hooks aident à gérer efficacement l'état et les effets secondaires des composants fonctionnels, rendant le développement de React plus concis et puissant.
.
.
.

Résumons....
.
.
.

Voici un résumé des hooks useState et useEffect dans React :

useState Hook

• Objectif : Gère l'état des composants fonctionnels.
• Syntaxe : const [state, setState] = useState(initialValue);
• Paramètres :
  • initialValue : la valeur de l'état initial.
• Retours :
  • Un tableau avec deux éléments :
  • state : la valeur de l'état actuel.
  • setState : Fonction pour mettre à jour l'état.

Exemple d'utilisation :

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

utiliser le crochet d'effet

• Objectif : Gère les effets secondaires dans les composants fonctionnels, tels que la récupération de données, les abonnements ou les mises à jour manuelles du DOM.
• Syntaxe : useEffect(() => { /* logique d'effet */ }, [dépendances]);
• Paramètres :
  • Fonction d'effet : Contient le code à exécuter comme effet secondaire.
  • Tableau de dépendances (facultatif) : Liste des dépendances qui déclenchent l'effet lorsqu'elles sont modifiées. S'il est vide, l'effet ne s'exécute qu'une seule fois après le rendu initial. En cas d'omission, l'effet s'exécute après chaque rendu.
• Fonction de nettoyage (facultatif) : Fonction renvoyée par la fonction d'effet pour nettoyer les ressources.

Exemple d'utilisation :

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

Points clés :

• useState simplifie la gestion de l'état dans les composants fonctionnels.
• useEffect gère les effets secondaires et peut éventuellement nettoyer après lui-même.
• Les deux hooks fonctionnent ensemble pour créer des composants fonctionnels dynamiques et avec état dans React.

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!