Méthodes d'état du jour et de cycle de vie - ReactJS

Bienvenue au jour 5 du défi « 30 Days of ReactJS » ! Aujourd'hui, nous allons explorer deux concepts fondamentaux dans React : les méthodes d'état et de cycle de vie. Les comprendre vous permettra de créer des applications dynamiques et interactives.

Qu'est-ce que l'État ?

State dans React fait référence à un objet intégré qui contient des informations qui peuvent changer au cours de la durée de vie d'un composant. Contrairement aux props, qui sont en lecture seule et transmises par un composant parent, l'état est local au composant et peut être modifié en interne.

Pensez à l’État comme à un tableau. Vous pouvez y écrire et effacer des informations selon vos besoins, permettant à votre composant de s'adapter aux changements, tels que la saisie de l'utilisateur ou la récupération de données.

Exemple : Un composant compteur

Créons un composant compteur simple qui augmente son nombre lorsqu'un bouton est cliqué :

import { useState } from 'react';

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

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

Ici, useState est un hook React qui permet d'ajouter un état à un composant fonctionnel. La variable count contient l'état actuel et setCount est la fonction pour la mettre à jour.

Que sont les méthodes de cycle de vie ?

Méthodes de cycle de vie sont des méthodes spéciales dans les composants de la classe React qui vous permettent d'exécuter du code à des moments spécifiques du cycle de vie d'un composant. Ce cycle de vie comprend le montage (ajout au DOM), la mise à jour (rerendu) et le démontage (suppression du DOM).

Bien que les composants de classe deviennent moins courants avec l'introduction des hooks React, la compréhension des méthodes de cycle de vie est toujours importante, en particulier lorsque vous travaillez avec des bases de code plus anciennes.

Exemple : composantDidMount

Une méthode de cycle de vie courante est componentDidMount, qui s'exécute après le premier rendu du composant. Il est souvent utilisé pour initialiser des données, par exemple pour récupérer des données à partir d'une API :

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

Dans cet exemple, composantDidMount récupère les données dès que le composant est ajouté au DOM et l'état est mis à jour avec les données récupérées.

Exemple concret : une commande de restaurant
Imaginez passer une commande dans un restaurant (montage de composants). La cuisine commence à préparer votre nourriture après que vous ayez passé la commande (composantDidMount). Au fur et à mesure que la nourriture est en cours de préparation (mise à jour), vous pouvez recevoir des mises à jour de statut. Enfin, la nourriture est servie et vous terminez votre repas (démontage des composants).

État et cycle de vie avec Vite

Puisque nous utilisons Vite pour notre environnement de développement, la configuration des méthodes d'état et de cycle de vie est transparente. Le serveur de développement rapide de Vite garantit que vos changements d'état et vos méthodes de cycle de vie sont reflétés presque instantanément pendant le développement.

Voici comment structurer votre projet pour inclure des méthodes d'état et de cycle de vie :

1. Initialiser l'état : Utilisez useState dans vos composants fonctionnels pour gérer les données dynamiques.
2. Composants de classe pour le cycle de vie : Si vous utilisez des composants de classe, implémentez des méthodes de cycle de vie telles que composantDidMount et composantWillUnmount pour gérer les effets secondaires.

Conclusion

Les méthodes d'état et de cycle de vie sont cruciales pour créer des applications React dynamiques et réactives. L'état permet à vos composants d'être interactifs, tandis que les méthodes de cycle de vie vous permettent de contrôler comment et quand vos composants interagissent avec le DOM.

Demain, nous explorerons la gestion des événements dans React, qui améliorera encore l'interactivité de vos applications.

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!