React Hooks en action : analyse approfondie de useState à useContext

Analyse approfondie de useState et useContext

React Hooks a complètement changé la gestion de l'état et la réutilisation des fonctions des composants React, permettant aux composants de fonction d'avoir les fonctions des composants de classe.

useState : gestion de l'état des composants de fonction

Introduction:

useState est le Hook le plus basique de React, qui nous permet d'ajouter un état aux composants de fonction. useState est un Hook intégré fourni par React pour ajouter un état local aux composants de fonction. Il accepte une valeur initiale comme paramètre et renvoie un tableau. Le premier élément du tableau est l'état actuel et le deuxième élément est une fonction qui met à jour l'état.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

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

La fonction setCount renvoyée par useState est utilisée pour mettre à jour l'état. Chaque fois que setCount est appelé, React restitue le composant et régénère le DOM virtuel en fonction de la nouvelle valeur d'état, puis effectue une comparaison DOM efficace et met enfin à jour le DOM réel.

Compréhension approfondie de

Comment fonctionne useState, l'asynchronicité des mises à jour d'état et leur impact sur les performances.

• Les mises à jour d'état sont asynchrones, ce qui signifie que si setCount est appelé plusieurs fois dans la même boucle d'événements, React n'utilisera que la dernière valeur.

• useState ne prend pas en charge la comparaison superficielle d'objets complexes. Si vous devez mettre à jour l'état en fonction de l'état précédent, vous pouvez utiliser la forme de fonction de setCount, telle que setCount(prevCount => prevCount 1).

Application avancée

Combiné avec useEffect pour gérer les effets secondaires, tels que l'acquisition et le nettoyage des données.

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

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

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