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

); } export default Example;

Copier après la connexion

Exemple d'interprétation de code : Tout d'abord, nous utilisons useState pour créer trois variables d'état : data stocke les données acquises, chargement indique si les données sont en cours de chargement et error stocke toutes les informations d'erreur possibles.

Ensuite, nous définissons une fonction fetchData pour l'acquisition de données asynchrone. Cette fonction contient la gestion des erreurs et la logique de mise à jour de l'état.

Ensuite, nous utilisons useEffect pour effectuer l'acquisition de données. Le deuxième paramètre de useEffect est un tableau de dépendances. Passer un tableau vide ici signifie qu'il n'est exécuté qu'une seule fois après le montage du composant, c'est-à-dire que les données sont acquises lors de leur premier rendu. Cela garantit que les données sont acquises lorsque le composant est chargé, plutôt que réacquises à chaque fois que l'état est mis à jour.

Dans la fonction de rappel de useEffect, nous appelons la fonction fetchData. Étant donné que fetchData modifie les valeurs des données, du chargement et de l'erreur, il n'est pas nécessaire d'ajouter ces variables d'état au tableau de dépendances, car leurs modifications déclencheront le nouveau rendu du composant, effectuant ainsi automatiquement une nouvelle acquisition de données.

useContext : une solution contextuelle pour l'état partagé

Introduction

useContext est utilisé pour transmettre des données entre composants sans transmettre explicitement d'accessoires.

Tout d'abord, nous devons créer un contexte :

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

然后在组件中使用 useContext：

importer React, { useContext } depuis 'react' ;
importer { ThemeContext } depuis './ThemeContext' ;

fonction Bouton() {
  const thème = useContext(ThemeContext);

  retour (
    <bouton>



<h4>
  
  
  Compréhension approfondie
</h4>

<ul>
<li>Les composants utilisant useContext seront restitués lorsque le fournisseur sera mis à jour, même si les autres états du composant n'ont pas changé.</li>
<li>Si plusieurs composants s'abonnent au même contexte, ils seront tous restitués lorsque l'état du fournisseur change, ce qui peut entraîner une surcharge inutile en termes de performances. Cela peut être optimisé grâce à des stratégies telles que React.memo ou ShouldComponentUpdate.</li>
<li>Pour éviter les abus, utilisez Contexte uniquement lorsque vous devez partager l'état sur plusieurs niveaux, sinon les accessoires doivent avoir la priorité.</li>
</ul>

<h3>
  
  
  Application combinée de useState et useContext
</h3>

<p>En combinant useState et useContext, nous pouvons créer une application de compteur avec fonction de changement de thème :<br>
</p>

<pre class="brush:php;toolbar:false">importer React, { createContext, useState, useContext } depuis 'react' ;

// Création d'un ThemeContext
const ThemeContext = createContext('light');

function ThemeProvider({ enfants }) {
  const [thème, setTheme] = useState('light');

  retour (
    <ThemeContext.Provider value={theme}>
      {enfants}
      <bouton onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Basculer le thème
      </bouton>
    </ThemeContext.Provider>
  );
}

fonction Compteur() {
  const thème = useContext(ThemeContext);
  const [compte, setCount] = useState(0);

  retour (
    <div>



<p>Explication de l'exemple de code : ThemeProvider utilise useState pour gérer l'état du thème, et le composant Counter s'abonne au thème via useContext et utilise useState pour gérer l'état du compteur. Lorsque le thème est changé, Counter sera restitué pour afficher la couleur du thème correspondant.</p>


          

            
        

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!