L'approche originelle des composants stateful

Avant l'avènement des Hooks, les composants classe (Class Components) étaient la seule manière en React de créer des composants possédant un état local (`state`) ou nécessitant l'accès à des méthodes de cycle de vie (pour exécuter du code à des moments précis comme le montage, la mise à jour ou le démontage du composant).

Basés sur la syntaxe des classes ES6 introduite en JavaScript, ils offraient une structure plus formelle pour encapsuler la logique et les données d'un composant. Bien que l'écosystème React ait massivement adopté les composants fonctionnels et les Hooks comme approche moderne et privilégiée, une quantité considérable de code existant (dans des projets open-source, des applications d'entreprise, des tutoriels plus anciens) est écrite en utilisant les composants classe.

Par conséquent, même si vous n'écrirez probablement pas beaucoup de nouveaux composants classe, il est absolument essentiel de comprendre leur fonctionnement pour pouvoir lire, déboguer, maintenir et potentiellement migrer ce code hérité. Ce chapitre vise à vous fournir cette compréhension fondamentale.

Syntaxe de base d'un composant classe

Un composant classe est défini en utilisant le mot-clé `class` et doit impérativement hériter de `React.Component` (ou de `React.PureComponent` pour certaines optimisations). Il doit également implémenter une méthode spécifique : `render()`.

import React from 'react'; // Import souvent nécessaire

class MessageBienvenueClasse extends React.Component {
  // La méthode render est obligatoire
  render() {
    // Elle doit retourner du JSX (ou null)
    return 
Bienvenue depuis un Composant Classe !
;
  }
}

export default MessageBienvenueClasse;

La méthode `render()` est le coeur du composant classe. C'est elle qui est responsable de retourner le JSX décrivant ce que le composant doit afficher. Elle est similaire au corps de retour d'un composant fonctionnel.

Gestion de l'état local avec `this.state` et `this.setState()`

L'une des principales raisons d'utiliser les composants classe était la gestion de l'état local. Cela se fait via une propriété spéciale `this.state` et une méthode `this.setState()`.

• Initialisation de l'état (`this.state`) : L'état est généralement initialisé dans le `constructor` de la classe. `this.state` doit être un objet.
• Lecture de l'état : Vous accédez à l'état via `this.state.nomDeLaPropriete` dans la méthode `render` ou d'autres méthodes de la classe.
• Mise à jour de l'état (`this.setState()`) : C'est la seule manière correcte de mettre à jour l'état. Ne modifiez jamais `this.state` directement. `this.setState()` prend un objet contenant les parties de l'état à mettre à jour (il fusionne les changements). Il déclenche également un nouveau rendu du composant.

import React from 'react';

class CompteurClasse extends React.Component {
  constructor(props) {
    super(props); // Appel obligatoire du constructeur parent
    // Initialisation de l'état
    this.state = { 
      compte: 0 
    };
  }

  incrementer = () => {
    // Mise à jour de l'état avec this.setState
    this.setState({ compte: this.state.compte + 1 });
    // Note: pour des màj basées sur l'état précédent, la forme fonctionnelle est plus sûre:
    // this.setState((etatPrecedent) => ({ compte: etatPrecedent.compte + 1 }));
  }

  render() {
    return (
      

        {/* Lecture de l'état avec this.state */}
        
Compte : {this.state.compte}
        {/* Appel du gestionnaire d'événement */}
        Incrémenter
      
    );
  }
}

export default CompteurClasse;

Notez l'utilisation de `this.` pour accéder à `state`, `setState` et aux méthodes de la classe. La gestion du mot-clé `this` était une source fréquente de confusion (voir section sur le binding).

Accès aux props via `this.props`

Tout comme les composants fonctionnels reçoivent les props comme premier argument, les composants classe y accèdent via la propriété `this.props`. Ces props sont passées par le composant parent lors de l'utilisation du composant classe.

import React from 'react';

class SalutationClasse extends React.Component {
  render() {
    // Accès aux props via this.props
    return 
Bonjour, {this.props.nom} !
;
  }
}

// Utilisation :
// 

Méthodes de cycle de vie (Aperçu)

Une autre fonctionnalité clé des composants classe était l'accès à des méthodes spéciales, appelées méthodes de cycle de vie, qui s'exécutaient automatiquement à différents moments de la vie du composant :

• Montage : Lorsque le composant est inséré dans le DOM (`constructor`, `render`, `componentDidMount`). `componentDidMount` était très utilisé pour les effets de bord initiaux (ex: appels API).
• Mise à jour : Lorsque les props ou l'état changent (`render`, `componentDidUpdate`). `componentDidUpdate` permettait de réagir aux changements.
• Démontage : Lorsque le composant est retiré du DOM (`componentWillUnmount`). Utilisé pour le nettoyage (ex: annuler des timers, des abonnements).

Il existait d'autres méthodes plus avancées (`shouldComponentUpdate`, `getDerivedStateFromProps`, `getSnapshotBeforeUpdate`). Comprendre que ces méthodes existaient et à quoi elles servaient globalement est utile pour lire du code ancien. Les Hooks (`useEffect` notamment) fournissent aujourd'hui des alternatives plus simples et plus flexibles pour gérer ces effets de bord dans les composants fonctionnels.

Le défi du `this` et le binding

Un point délicat avec les composants classe était la gestion du contexte `this` dans les gestionnaires d'événements. Par défaut, dans JavaScript, la valeur de `this` dans une fonction appelée en réponse à un événement n'est pas l'instance du composant. Pour pouvoir utiliser `this.setState` ou `this.props` dans ces gestionnaires, il fallait s'assurer que `this` était correctement lié (bindé) à l'instance de la classe.

Les approches courantes étaient :

• Le binding explicite dans le `constructor` (`this.handleClick = this.handleClick.bind(this);`).
• L'utilisation des fonctions fléchées comme propriétés de classe (class fields - comme dans l'exemple `incrementer` plus haut, qui lie automatiquement `this`).
• L'utilisation de fonctions fléchées directement dans le JSX (`onClick={() => this.handleClick()}`).

Rencontrer ces différentes techniques de binding est fréquent dans le code basé sur les classes.

Conclusion : Une connaissance essentielle pour l'héritage

Bien que les composants fonctionnels et les Hooks soient désormais la norme pour le développement React moderne, les composants classe constituent une part importante de l'histoire de React et de nombreuses bases de code existantes. Comprendre leur syntaxe, la gestion de l'état avec `this.state` et `this.setState`, l'accès aux props via `this.props`, le concept général des méthodes de cycle de vie et les problématiques liées à `this` est indispensable pour tout développeur React amené à travailler sur des projets variés.

Cette connaissance vous permettra non seulement de lire et de maintenir efficacement ce code hérité, mais aussi d'apprécier davantage la simplicité et la flexibilité apportées par les composants fonctionnels et les Hooks.