Piège

Nous vous conseillons de définir vos composants au moyen de fonctions plutôt que de classes. Voyez comment migrer.

Component est la classe de base pour les composants React définis à l’aide de classes JavaScript. Les composants à base de classes restent pris en charge par React, mais nous les déconseillons pour tout nouveau code.

class Greeting extends Component {
  render() {
    return <h1>Salut {this.props.name} !</h1>;
  }
}

Référence

Component

Pour définir un composant React sous forme de classe, étendez la classe Component fournie par React et définissez sa méthode render :

import { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Salut {this.props.name} !</h1>;
  }
}

Seule la méthode render est requise, les autres méthodes sont optionnelles.

Voir d’autres exemples ci-dessous.

context

Le contexte d’un composant à base de classe est mis à disposition dans this.context. Il n’est disponible que si vous précisez quel contexte vous souhaitez récupérer en utilisant static contextType (approche plus récente) ou static contextTypes (approche dépréciée).

Un composant à base de classe ne peut lire qu’un contexte à la fois.

class Button extends Component {
  static contextType = ThemeContext;

  render() {
    const theme = this.context;
    const className = 'button-' + theme;
    return (
      <button className={className}>
        {this.props.children}
      </button>
    );
  }
}

Remarque

La lecture de this.context dans des composants à base de classes est équivalente à un appel à useContext dans les fonctions composants.

Voyez comment migrer.

props

Les props passées à un composant à base de classe sont mises à disposition dans this.props.

class Greeting extends Component {
  render() {
    return <h1>Salut {this.props.name} !</h1>;
  }
}

<Greeting name="Clara" />

Remarque

La lecture de this.props dans des composants à base de classes est équivalente à la déclaration des props dans les fonctions composants.

Voyez comment migrer.

refs

Dépréciation

Cette API sera retirée d’une future version majeure de React. Utilisez plutôt createRef.

Vous permet d’accéder à des refs textuelles historiques pour ce composant.

state

L’état d’un composant à base de classe est mis à disposition dans this.state. La champ state doit être un objet. Ne modifiez pas l’état directement. Si vous souhaitez modifier l’état, appelez setState avec un objet d’état en argument.

class Counter extends Component {
  state = {
    age: 31,
  };

  handleAgeChange = () => {
    this.setState({
      age: this.state.age + 1
    });
  };

  render() {
    return (
      <>
        <button onClick={this.handleAgeChange}>
        Prendre de l’âge
        </button>
        <p>Vous avez {this.state.age} ans.</p>
      </>
    );
  }
}

Remarque

La définition de state dans les composants à base de classes est équivalente à l’appel de useState dans les fonctions composants.

Voyez comment migrer.

constructor(props)

Le constructeur est exécuté avant le montage (l’ajout dans le DOM) de votre composant. En général, vous n’utilisez un constructeur dans React que pour deux raisons. Il vous permet de déclarer votre état puis de lier certaines de vos méthodes à votre instance :

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

  handleClick() {
    // ...
  }

Si vous utilisez une syntaxe JavaScript moderne, vous aurez rarement besoin des constructeurs. Vous pouvez plutôt réécrire le code ci-dessus en utilisant des initialiseurs de champs d’instance qui sont pris en charge par tous les navigateurs modernes et par des outils comme Babel :

class Counter extends Component {
  state = { counter: 0 };

  handleClick = () => {
    // ...
  }

Un constructeur ne devrait contenir aucun effet de bord ni aucun abonnement.

Paramètres

  • props : les props initiales du composant.

Valeur renvoyée

constructor ne devrait rien renvoyer.

Limitations

  • Ne lancez aucun effet de bord et ne souscrivez aucun abonnement dans le constructeur. Utilisez plutôt componentDidMount pour ça.

  • Dans un constructeur, vous devez impérativement appeler super(props) avant toute autre instruction. Si vous ne le faites pas, this.props sera undefined pendant l’exécution du constructeur, ce qui peut être déroutant et causer des bugs.

  • Le constructeur est le seul endroit où vous pouvez affecter une valeur directement à this.state. Dans toutes les autres méthodes, vous devez plutôt utiliser this.setState(). En revanche, n’appelez pas setState dans le constructeur.

  • Lorsque vous faites du rendu côté serveur, le constructeur sera exécuté côté serveur aussi, suivi de la méthode render. En revanche, les méthodes de cycle de vie telles que componentDidMount ou componentWillUnmount ne seront pas exécutées côté serveur.

  • En Mode Strict, React appellera votre