Fondamentaux React Partie 2

Présentation 

La semaine dernière, lors de la première partie consacrée aux fondamentaux de React, nous avons découvert les composants, les propriétés et l'état local. Cette semaine, nous allons approfondir la deuxième partie de ce chapitre :

• Comprendre le cycle de vie des composants : Les différentes phases du cycle de vie d'un composant et leur utilisation.
• Gestion des événements : Utilisation des événements pour interagir avec les composants.

Le cycle de vie des composants

Le cycle de vie fait référence aux événements par lesquels passe un composant depuis sa création jusqu'à sa destruction. Ce cycle se compose de trois éléments principaux : 

• Montage (Mounting)
• Mise à jour (Updating)
• Démontage (Unmounting)

Ces différentes étapes du cycle de vie permettent aux développeurs de contrôler le comportement des composants React à différents moments de leur existence, ce qui est essentiel pour créer des applications robustes et performantes.

Le montage 

Le montage correspond à l'étape où une instance du composant est créée dans le DOM.

Les différentes évènements

constructor()

Il suit le même principe que la programmation orientée objet : il est toujours appelé en premier et est déclenché lorsque le composant doit être rendu dans le DOM virtuel.

render()

On a déjà parlé de cet événement durant la première partie de ce chapitre, mais pour rappeler brièvement, la méthode render() est une méthode obligatoire pour les composants de classe en React. Elle renvoie ce que le composant doit afficher à l'écran.

componentDidMount()

Cette méthode est appelée directement après le rendu initial du composant dans le DOM. C'est ici que les appels réseau et les manipulations du DOM sont effectués.

Voici un exemple complet sur le montage : 

class Items extends Component {

    constructor(props) {

        super(props)

        console.log('[constructor]')

    }

    componentDidMount() {

        console.log('[componentDidMount]')

    }

    render() {

        console.log('[render]')

        return <div>Liste d'items</div>

    }

}

Lorsque ce composant est créé et monté dans le DOM, différents messages sont affichés dans la console pour indiquer les différentes étapes du cycle de vie du composant.En effet, ils sont appelés dans l'ordre suivant :

La mise à jour

Le cycle de vie de la mise à jour est déclenché lors de la modification de l'état local du composant ou lorsqu'une propriété venant d'un parent est modifiée, déclenchant ainsi un re-render. Cela permet au composant de réexécuter ses méthodes de cycle de vie et de mettre à jour son rendu en conséquence.

Les différentes évènements

componentDidUpdate()

Cet événement est appelé immédiatement après qu'une mise à jour a été rendue dans le DOM.

shouldComponentUpdate()

Cet événement renvoie généralement une valeur booléenne indiquant si la mise à jour doit être effectuée.

Le démontage

Le démontage d'un composant se produit lorsque celui-ci est retiré du DOM.

Les différentes évènements

componentWillUnmount()

Cette methode est appelée juste avant que le composant soit retiré du DOM. Son rôle principal est de permettre le nettoyage des ressources, la correction des bugs, ainsi que la désactivation des fonctionnalités potentiellement problématiques qui pourraient affecter le bon fonctionnement d'autres parties du code.

 

Bonus de la Semaine : 

Lors de la création d'un projet React, la plupart des développeurs utilisent Visual Studio Code comme environnement de développement. Une bibliothèque couramment utilisée pour faciliter le développement avec React dans VSCode est "ES7+ React/Redux/React-Native snippets". Cette extension offre divers outils et fonctionnalités spécifiques, notamment la possibilité de créer automatiquement des composants en utilisant le nom du fichier, ce qui améliore considérablement le flux de travail du développement.

Voici une demonstration:

1. Premièrement, on recherche l'extension puis on l'installe.

   

2. Maintenant, après l'installation, tout ce que nous avons à faire est de créer un fichier JavaScript où nous placerons notre composant.

   

3. Maintenant, nous pouvons simplement écrire cette ligne : rfce et appuyer sur "Entrée".

   

4. Et voici le résultat final : 

   

Conclusion

Cette semaine, nous avons couvert le cycle de vie des composants, qui constitue le cœur du développement en React. Avec cela, nous concluons notre chapitre sur les fondamentaux, nous permettant ainsi d'aborder quelques notions avancées de React dans le prochain chapitre.

Réferences

État et cycle de vie. React. https://fr.legacy.reactjs.org/docs/state-and-lifecycle.html (consulté le 22 février 2024)

(2021, août 18). Cycle d’un composant React.MWJ by USER.  https://makewithjs.com/article/react/cycle (consulté le 23 février 2024)

Professeur Cot. (2023, août 20). Cycle de vie au montage d’un composant React [Vidéo]. YouTube. https://www.youtube.com/watch?v=MQ5K-VLXW_o (consulté le 22 février 2024)

React Lifecycle Methods diagram. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ (consulté le 22 février 2024)

Comprendre le cycle de vie de ReactJS. Essential Developer Skills. https://essential-dev-skills.com/reactjs/developpons-avec-react/comprendre-le-cycle-de-vie  (consulté le 23 février 2024)