ReactJS — Méthodes de cycle de vie des composants

Les composants React ont un cycle de vie d'événements qu'ils traversent depuis leur création jusqu'à leur destruction. Ces événements du cycle de vie permettent aux développeurs de se connecter au cycle de vie d'un composant à différents moments et d'effectuer certaines actions.

Voici les principales méthodes de cycle de vie d'un composant React, ainsi qu'une brève explication de chacune et un exemple de la façon dont elles pourraient être utilisées :

constructor(): Cette méthode est appelée avant qu'un composant ne soit monté (inséré dans le DOM). Il est utilisé pour initialiser l'état et lier les gestionnaires d'événements.

Exemple:

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

Exemple:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Exemple:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Exemple:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Exemple:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

Voici un résumé des principales méthodes de cycle de vie des composants React :

• constructor(): Initialise l'état et lie les gestionnaires d'événements. Appelé avant le montage d'un composant.
• componentDidMount(): déclenche une action ou un appel d'API une fois le composant rendu. Appelé après le montage d'un composant.
• shouldComponentUpdate(): Renvoie un booléen indiquant si le composant doit être mis à jour ou non. Appelé avant qu'un composant ne soit rendu à nouveau.
• componentDidUpdate(): déclenche une action ou un appel d'API après la mise à jour du composant. Appelé après la mise à jour d'un composant.
• componentWillUnmount(): nettoie les ressources ou les écouteurs d'événement. Appelé juste avant la destruction d'un composant.
• render(): Rend le JSX pour un composant. Appelé chaque fois que le composant doit être rendu à nouveau.