React.Component — les composants de classe et leur fonctionnement

Qu'est-ce que React.Component ?

React.Component est une classe abstraite qui fournit des méthodes intégrées pour travailler avec l'état, les props et le cycle de vie du composant. Pour créer un composant de classe, vous devez définir une classe qui étend React.Component et implémenter la méthode render.

React.Component est apparu dans la toute première version de React (2013) et est resté la méthode principale de création de composants pendant cinq ans. L'écosystème React a été construit autour des classes : les composants d'ordre supérieur (HOC), les render props, le contexte — tous ces modèles ont été implémentés avec la syntaxe de classe.

Avec la sortie de React 16.8 en 2019, l'équipe React a introduit les hooks comme alternative aux classes. Les hooks résolvaient les mêmes problèmes — état, effets, contexte — mais sans héritage ni liaison complexe de contexte. React.Component reste entièrement pris en charge, mais l'approche fonctionnelle est recommandée pour les nouveaux projets.

Créer un composant de classe

Le composant de classe minimal est une classe avec une seule méthode render qui retourne un élément React. render est la seule méthode obligatoire. Elle doit être une fonction pure de this.props et this.state : le même ensemble de props et d'état produit le même résultat.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Constructeur et initialisation de l'état

Le constructeur s'exécute avant le montage. Il appelle super(props) pour passer les props à la classe parente et initialise this.state. Utiliser le constructeur à d'autres fins — abonnements, appels API — n'est pas recommandé ; componentDidMount existe pour cela.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Gestion d'état avec this.state et this.setState

this.state est un objet contenant les données du composant. Le muter directement (this.state.count = 1) est interdit — cela ne déclenche pas de nouveau rendu et brise la prévisibilité. L'état doit être mis à jour via this.setState, qui crée un nouvel objet d'état et déclenche un nouveau rendu.

setState peut accepter un objet ou une fonction. La forme fonctionnelle est préférée lorsque le nouvel état dépend du précédent : this.setState(prev => ({ count: prev.count + 1 })). React peut regrouper plusieurs appels setState en un seul lot pour optimiser les performances.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Une propriété importante de setState est qu'il est asynchrone. Après avoir appelé setState, l'état n'est pas mis à jour immédiatement. Si vous devez effectuer une action après la mise à jour, passez un callback en second argument : this.setState(newState, () => console.log(this.state)).

Méthodes du cycle de vie

Les composants de classe ont des méthodes prédéfinies que React appelle à des moments spécifiques. Montage — constructor → render → componentDidMount. Mise à jour — render → componentDidUpdate. Démontage — componentWillUnmount.

ComponentDidMount — récupération de données

componentDidMount est l'endroit principal pour les effets de bord après le premier rendu. Ici, vous effectuez des requêtes HTTP, établissez des connexions WebSocket et démarrez des temporisateurs. Si vous ne nettoyez pas l'abonnement dans componentWillUnmount, une fuite de mémoire se produit.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Liaison du contexte this dans les méthodes

En JavaScript, les méthodes de classe ne sont pas liées à l'instance par défaut. Si vous passez une méthode comme callback — à un gestionnaire d'événement, à un temporisateur — this sera undefined (en mode strict) ou window (sans mode strict). Sans liaison, this.setState lancera une erreur.

Il y a trois façons de lier : bind dans le constructeur, une fonction fléchée dans le callback et un class field avec fonction fléchée. La première méthode est la recommandation officielle de React : lier une fois dans le constructeur, sans recréer la fonction à chaque rendu.

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — syntaxe moderne avec liaison automatique. Une fonction fléchée dans une propriété de classe capture this depuis la portée du constructeur. L'inconvénient est que la méthode est créée sur chaque instance, pas sur le prototype, ce qui augmente l'utilisation mémoire pour des centaines de composants du même type.

Composants de classe vs fonctionnels

Le choix entre classe et fonction n'est pas qu'une question de syntaxe. Les composants fonctionnels avec hooks résolvent des problèmes inhérents aux classes : duplication de logique dans différentes méthodes du cycle de vie (componentDidMount + componentDidUpdate), complexité avec this et incapacité d'extraire la logique connexe dans un bloc réutilisable.

Les composants fonctionnels sont plus faciles à tester — ils n'ont pas d'état interne (qui avant les hooks n'était disponible que dans les classes) et ne nécessitent pas de montage dans le DOM pour vérifier les callbacks. React recommande les composants fonctionnels pour tous les nouveaux projets ; la documentation et les exemples sont écrits avec eux.

Les composants de classe restent le meilleur choix lorsqu'on travaille avec du code legacy. Si un projet a été démarré avant 2019, il contient probablement des milliers de composants de classe. Les réécrire tous en hooks en un seul sprint est risqué. React garantit la rétrocompatibilité : les composants de classe ne seront pas supprimés.

Stratégie de migration des classes vers les hooks

La migration progressive commence par l'analyse du composant. Les composants simples sans état sont traduits en premier — ils sont trivialement remplacés par des fonctions. Ensuite — les composants avec un ou deux champs d'état, où useState remplace directement this.state et this.setState.

Les composants complexes avec plusieurs méthodes du cycle de vie sont traduits en utilisant useEffect. La logique de componentDidMount + componentDidUpdate est divisée en appels useEffect séparés avec différentes dépendances. componentWillUnmount est remplacé par une fonction de retour dans useEffect. Pour une logique d'état complexe, utilisez useReducer.

Les outils de migration automatisée — @phenomnomnominal/ts-react-class-to-hook ou les scripts codemod — peuvent convertir automatiquement les classes simples. Pour les cas complexes, la migration reste un travail manuel nécessitant une compréhension de la logique du composant source.