Composants de la classe React

❮ Précédent Suivant ❯

Avant React 16.8, les composants de classe étaient le seul moyen de suivre l'état et le cycle de vie d'un composant React. Les composants fonctionnels étaient considérés comme "sans état".

Avec l'ajout de Hooks, les composants Function sont désormais presque équivalents aux composants Class. Les différences sont si mineures que vous n'aurez probablement jamais besoin d'utiliser un composant Class dans React.

Même si les composants Function sont préférés, il n'existe actuellement aucun plan pour supprimer les composants Class de React.

Cette section vous donnera un aperçu de la façon d'utiliser les composants de classe dans React.

N'hésitez pas à ignorer cette section et à utiliser les composants de fonction à la place.

Composants de réaction

Les composants sont des morceaux de code indépendants et réutilisables. Elles ont le même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et renvoient du HTML via une fonction render().

Les composants sont de deux types, les composants de classe et les composants de fonction. Dans ce chapitre, vous découvrirez les composants de classe.

Créer un composant de classe

Lors de la création d'un composant React, le nom du composant doit commencer par une lettre majuscule.

Le composant doit inclure l' extends React.Componentinstruction, cette instruction crée un héritage à React.Component et donne à votre composant l'accès aux fonctions de React.Component.

Le composant nécessite également une render()méthode, cette méthode renvoie HTML.

Exemple

Créez un composant de classe appelé Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Maintenant, votre application React a un composant appelé Car, qui renvoie un <h2>élément.

Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à celle du HTML normal : <Car />

Exemple

Affichez le Carcomposant dans l'élément "racine":

ReactDOM.render(<Car />, document.getElementById('root'));

Obtenir une certification!

Complétez les modules React, faites les exercices, passez l'examen et devenez certifié w3schools !!

95 $ S'INSCRIRE

Constructeur de composants

S'il y a une constructor()fonction dans votre composant, cette fonction sera appelée lorsque le composant sera lancé.

La fonction constructeur est l'endroit où vous initiez les propriétés du composant.

Dans React, les propriétés des composants doivent être conservées dans un objet appelé state.

Vous en apprendrez plus plus statetard dans ce tutoriel.

La fonction constructeur est également l'endroit où vous honorez l'héritage du composant parent en incluant l' super() instruction, qui exécute la fonction constructeur du composant parent, et votre composant a accès à toutes les fonctions du composant parent ( React.Component).

Exemple

Créez une fonction constructeur dans le composant Car et ajoutez une propriété de couleur :

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Utilisez la propriété color dans la fonction render() :

Exemple

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Accessoires

Une autre façon de gérer les propriétés des composants consiste à utiliser props.

Les accessoires sont comme des arguments de fonction, et vous les envoyez dans le composant en tant qu'attributs.

Vous en apprendrez plus propsdans le chapitre suivant.

Exemple

Utilisez un attribut pour passer une couleur au composant Car et utilisez-le dans la fonction render() :

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Accessoires dans le constructeur

Si votre composant a une fonction de constructeur, les accessoires doivent toujours être passés au constructeur et également au React.Component via la super()méthode.

Exemple

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

Composants dans Composants

Nous pouvons faire référence à des composants à l'intérieur d'autres composants :

Exemple

Utilisez le composant Car dans le composant Garage :

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Composants dans les fichiers

React consiste à réutiliser du code, et il peut être judicieux d'insérer certains de vos composants dans des fichiers séparés.

Pour ce faire, créez un nouveau fichier avec une .js extension de fichier et insérez-y le code :

Notez que le fichier doit commencer par importer React (comme précédemment) et qu'il doit se terminer par l'instruction export default Car;.

Exemple

Voici le nouveau fichier, nous l'avons nommé Car.js:

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Pour pouvoir utiliser le Carcomposant, vous devez importer le fichier dans votre application.

Exemple

Maintenant, nous importons le Car.jsfichier dans l'application et nous pouvons utiliser le Car composant comme s'il avait été créé ici.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

État du composant de la classe React

Les composants de la classe React ont un stateobjet intégré.

Vous avez peut-être remarqué que nous avons utilisé stateplus tôt dans la section constructeur de composants.

L' stateobjet est l'endroit où vous stockez les valeurs de propriété qui appartiennent au composant.

Lorsque l' stateobjet change, le composant s'affiche à nouveau.

Création de l'objet d'état

L'objet d'état est initialisé dans le constructeur :

Exemple

Spécifiez l' stateobjet dans la méthode du constructeur :

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

L'objet d'état peut contenir autant de propriétés que vous le souhaitez :

Exemple

Spécifiez toutes les propriétés dont votre composant a besoin :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Utilisation de l' `state`objet

Faites référence à l' stateobjet n'importe où dans le composant en utilisant la syntaxe :this.state.propertyname

Exemple:

Reportez-vous à l' stateobjet dans la render()méthode :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Modification de l' `state`objet

Pour modifier une valeur dans l'objet d'état, utilisez la this.setState()méthode.

Lorsqu'une valeur dans l' stateobjet change, le composant sera restitué, ce qui signifie que la sortie changera en fonction de la ou des nouvelles valeurs.

Exemple:

Ajoutez un bouton avec un onClickévénement qui modifiera la propriété color :

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Utilisez toujours la setState()méthode pour changer l'objet d'état, cela garantira que le composant sait qu'il a été mis à jour et appelle la méthode render() (et toutes les autres méthodes du cycle de vie).

Cycle de vie des composants

Chaque composant de React a un cycle de vie que vous pouvez surveiller et manipuler au cours de ses trois phases principales.

Les trois phases sont : Montage , Mise à jour et Démontage .

Montage

Le montage signifie mettre des éléments dans le DOM.

React a quatre méthodes intégrées qui sont appelées, dans cet ordre, lors du montage d'un composant :

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

La render()méthode est obligatoire et sera toujours appelée, les autres sont facultatives et seront appelées si vous les définissez.

constructor

La constructor()méthode est appelée avant toute autre chose, lorsque le composant est lancé, et c'est l'endroit naturel pour configurer les statevaleurs initiales et autres initiales.

La constructor()méthode est appelée avec le props, comme arguments, et vous devez toujours commencer par appeler le super(props)avant toute autre chose, cela lancera la méthode constructeur du parent et permettra au composant d'hériter des méthodes de son parent ( React.Component).

Exemple:

La constructorméthode est appelée, par React, à chaque fois que vous créez un composant :

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getDerivedStateFromProps

La getDerivedStateFromProps()méthode est appelée juste avant de rendre le ou les éléments dans le DOM.

C'est l'endroit naturel pour définir l' stateobjet en fonction de l'initiale props.

It takes state as an argument, and returns an object with changes to the state.

The example below starts with the favorite color being "red", but the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

Example:

The getDerivedStateFromProps method is called right before the render method:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

render

The render() method is required, and is the method that actually outputs the HTML to the DOM.

Example:

A simple component with a simple render() method:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidMount

The componentDidMount() method is called after the component is rendered.

This is where you run statements that requires that the component is already placed in the DOM.

Example:

At first my favorite color is red, but give me a second, and it is yellow instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Updating

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.

getDerivedStateFromProps

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.

This is still the natural place to set the state object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

Example:

If the component gets updated, the getDerivedStateFromProps() method is called:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

shouldComponentUpdate

In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is true.

The example below shows what happens when the shouldComponentUpdate() method returns false:

Example:

Stop the component from rendering at any update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Example:

Same example as above, but this time the shouldComponentUpdate() method returns true instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

render

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:

Example:

Click the button to make a change in the component's state:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

getSnapshotBeforeUpdate

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.

Then the componentDidUpdate() method is executed and writes a message in the empty DIV2 element:

Example:

Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidUpdate

The componentDidUpdate method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a componentDidUpdate method, this method is executed and writes a message in the empty DIV element:

Example:

The componentDidUpdate method is called after the update has been rendered in the DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()

componentWillUnmount

The componentWillUnmount method is called when the component is about to be removed from the DOM.

Example:

Click the button to delete the header:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));

❮ Previous Next ❯

Réagir Tutoriel

Crochets de réaction

Exercices de réaction

Composants de la classe React

Composants de réaction

Créer un composant de classe

Exemple

Exemple

Obtenir une certification!

Constructeur de composants

Exemple

Exemple

Accessoires

Exemple

Accessoires dans le constructeur

Exemple

Composants dans Composants

Exemple

Composants dans les fichiers

Exemple

Exemple

État du composant de la classe React

Création de l'objet d'état

Exemple

Exemple

Utilisation de l' stateobjet

Exemple:

Modification de l' stateobjet

Exemple:

Cycle de vie des composants

Montage

constructor

Exemple:

getDerivedStateFromProps

Example:

render

Example:

componentDidMount

Example:

Updating

getDerivedStateFromProps

Example:

shouldComponentUpdate

Example:

Example:

render

Example:

getSnapshotBeforeUpdate

Example:

componentDidUpdate

Example:

Unmounting

componentWillUnmount

Example:

Utilisation de l' `state`objet

Modification de l' `state`objet