React Class Components 03.1 - Introduction to the life cycle of a component

Introduction

Dans cette quête, nous allons parler des méthodes du cycle de vie d'un composant React et de la manière d'utiliser la methode 'componentDidMount' dans une application React.

C'est parti ! 🚀

🤓 Au terme de cette quête, vous serez capable de:

✅ Comprendre la notion de cycle de vie ✅ Découvrir la méthode de cycle de vie 'componentDidMount'

Cycle de vie d'un composant

Dans une précédente quête, nous avons passé en revue les bases sur la manière d'afficher un composant et comment réagir à une interaction en utilisant les gestionnaires d'événements et les variables d'états.

Maintenant, essayez d'imaginer que vous avez besoin de déclencher une opération particulière, faisant intervenir une méthode ou un appel à une fonction, lorsque par exemple un composant est affiché ou disparait d'une page.

React fournit des méthodes concernant le cycle de vie accessible dans tous les composants React construits à partir de classes.

Depuis React 16.8, les composants fonctionnels fournissent des fonctionnalités identiques avec les hooks

Cette quête se concentre sur la première méthode du cycle de vie d'un composant, appelé componentDidMount. Le nom de cette méthode elle-même signifie que le "composant vient d'être inséré à la page".

Nous allons voir un exemple tout de suite, utilisant console.log:

https://codepen.io/wildcodeschool/pen/xxxEazy

componentDidMount est spécifique aux composants utilisant les classes. Comme vous pouvez le voir avec la console, il est appelé:

• seulement une fois, juste après le premier appel du render

• automatiquement (nul besoin d'appeler this.componentDidMount() manuellement).

Un autre exemple :

https://codepen.io/wildcodeschool/pen/abbmRed

Cet exemple montre à quoi pourrait ressembler un indicateur de chargement : la valeur de chargement dans la variable d'état est placé à true par défaut (à travers le state) et est placé à false après une seconde, grâce à la méthode componentDidMount. Selon cette valeur, un contenu different est affiché dans le render.

Si nous revenons à notre exemple et que nous jetons un coup d'oeil à notre concole.log, vous pouvez voir que notre console.log venant du render est appelé deux fois, tandis que celui du componentDidMount n'est appelé qu'une fois. Pourquoi ?

• La méthode render d'un composant est appelé automatiquement quand le composant est affiché pour la première fois, dès qu'il est ajouté à la page. Ensuite il est appelé quand le state du composant est modifié (ce qui arrive après un appel à this.setState) ou quand une props est modifié.
• D'un autre coté, componentDidMount est appelé seulement une fois, après le premier render.

componentDidMount n'est pas la seule méthode concernant le cycle de vie. D'autres quêtes te présenteront les autres.

true|||true|||false
# La méthode componentDidMount() est utilisée dans les composants de classe et dans les composants fonctionnels:
[] vrai
[x] faux
# componentDidMount() est appelé après :
[x] le premier appel de rendu
[] chaque changement d'état
[] l'appel du constructeur
[] un appel manuel
# La méthode render() est appelée :
[] quand le composant est affiché pour la première fois
[] quand il y a un changement d'état
[] quand il y a une modification d'une props
[x] toutes les options