Méthodes et hooks du cycle de vie des pièces React Js dans React

React est une bibliothèque JavaScript qui nous permet de créer des interfaces utilisateur de manière déclarative. L'un des concepts clés de React est la manière dont nous gérons le cycle de vie des composants. Dans cet article, nous aborderons deux aspects principaux : les méthodes de cycle de vie dans les composants de classe et les Hooks.

1. Méthodes de cycle de vie dans les composants de classe

Les méthodes de cycle de vie sont des méthodes spéciales appelées à différentes étapes du cycle de vie d'un composant. Voici quelques-unes des méthodes de cycle de vie les plus courantes et leurs objectifs :

un. Montage

• constructor(props) : La première méthode appelée. Généralement utilisé pour initialiser l’état et les méthodes de liaison.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• composantDidMount() : appelé après le premier montage du composant sur le DOM. Idéal pour récupérer des données ou initialiser des abonnements.

componentDidMount() {
  this.fetchData();
}

b. Mise à jour

componentDidUpdate(prevProps, prevState) : appelé après les mises à jour du composant. Utile pour répondre aux changements d’accessoires ou d’état. Assurez-vous de vérifier les modifications pour éviter les boucles infinies.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c. Démontage

componentWillUnmount() : appelé juste avant que le composant ne soit supprimé du DOM. Utile pour nettoyer les abonnements, les minuteries ou d'autres opérations nécessitant un nettoyage.

componentWillUnmount() {
  this.cleanup();
}

d. Gestion des erreurs

componentDidCatch(error, info) : utilisé pour détecter les erreurs dans les composants enfants. Utile pour la gestion centralisée des erreurs.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2. Introduction aux crochets React

React Hooks est une fonctionnalité qui nous permet d'utiliser des méthodes d'état et de cycle de vie sans écrire de composants de classe. Voici quelques-uns des crochets les plus couramment utilisés :

un. utiliserState()

Utilisé pour ajouter un état aux composants fonctionnels. Cette fonction renvoie une paire : l'état actuel et une fonction pour le mettre à jour.

import React, { useState } from 'react';

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

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

b. utiliserEffet()

useEffect nous permet d'exécuter des effets secondaires dans des composants fonctionnels. Il combine les fonctionnalités de composantDidMount, composantDidUpdate et composantWillUnmount.

• Exemple 1 : useEffect avec un tableau vide ([]) Lorsque useEffect est utilisé avec un tableau vide en tant que dépendance, l'effet ne s'exécute qu'une seule fois après le montage du composant.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• Exemple 2 : useEffect sans tableau de dépendances Lorsque useEffect est fourni sans tableau de dépendances, l'effet s'exécute à chaque nouveau rendu du composant.

componentDidMount() {
  this.fetchData();
}

• Exemple 3 : useEffect avec un tableau de dépendances Lorsque vous fournissez un tableau de dépendances, l'effet s'exécute chaque fois qu'une des valeurs du tableau change.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c. utiliserContext()

Le hook useContext est utilisé pour accéder au contexte dans les composants fonctionnels. Ceci est particulièrement utile pour partager des données globales, telles que des thèmes ou le statut d'authentification des utilisateurs, sans perçage d'accessoires.

Exemple : Thématisation avec useContext
Dans cet exemple, nous allons créer un contexte de thème simple qui nous permet de basculer entre les thèmes clairs et sombres.

1. Créer le contexte du thème
Tout d'abord, nous créons un contexte pour le thème.

componentWillUnmount() {
  this.cleanup();
}

2. Consommer le contexte du thème
Ensuite, nous pouvons créer un composant qui consomme le contexte du thème pour appliquer des styles et fournir un bouton pour basculer le thème.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

3. Enveloppez l'application avec le fournisseur de thème
Enfin, nous enveloppons notre application (ou une partie de celle-ci) avec le ThemeProvider pour fournir le contexte du thème à ses enfants.

import React, { useState } from 'react';

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

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

Explication

• Création de contexte de thème : nous créons un ThemeContext à l'aide de createContext et d'un composant ThemeProvider qui gère l'état actuel du thème et fournit une fonction pour le basculer.

• Consommation de contexte : dans le ThemedComponent, nous utilisons useContext(ThemeContext) pour accéder au thème actuel et à la fonction bascule. Ce composant affiche un contenu différent en fonction du thème actuel et comprend un bouton pour l'activer.

• Structure de l'application : l'intégralité de l'application (ou une partie de celle-ci) est enveloppée dans le ThemeProvider, permettant à tout composant enfant d'accéder au contexte du thème.

d. useMemo() et useCallback()

• useMemo() : met en cache le résultat de calculs coûteux pour éviter de recalculer à chaque rendu.

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• useCallback() : met en cache les fonctions pour éviter de les recréer à chaque rendu.

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

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

3. Avantages de l'utilisation des crochets

Les hooks offrent de la flexibilité et la possibilité de partager une logique entre des composants sans avoir à utiliser des composants d'ordre supérieur (HOC) ou des accessoires de rendu. Certains avantages de l’utilisation des Hooks incluent :

• Simplicité et clarté : Le code devient plus propre et plus facile à lire.
• Flexibilité : La logique peut être divisée en fonctions plus petites qui peuvent être réutilisées n'importe où.
• Complexité réduite : évite l'utilisation de classes et de méthodes de cycle de vie compliquées.

---

Les méthodes de cycle de vie et les Hooks sont deux aspects importants du développement de React. Comprendre le fonctionnement des deux concepts nous permet de créer des composants plus efficaces et plus maintenables. Les hooks, en particulier, ouvrent de nouvelles possibilités pour développer des composants fonctionnels, modifiant ainsi la façon dont nous interagissons avec l'état et les effets secondaires.

En maîtrisant les méthodes de cycle de vie et les Hooks, vous serez en mesure de créer des applications React plus robustes et réactives. Bon codage !

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!