React Lifecycle - Différentes phases du cycle de vie de React avec des exemples

Introduction à React Lifecycle

Comme nous savons que les composants sont des éléments de base de la réaction, il est important de connaître les différentes étapes impliquées dans le cycle de vie d'un composant de réaction. Dans cet article, nous décrirons les différents événements et méthodes impliqués dans le cycle de vie d'un composant. Nous couvrirons également quelques exemples qui donneront une image claire du cycle de vie des composants React.

Phases du cycle de vie de React

Le cycle de vie des composants est défini comme la séquence de méthodes invoquées à différentes étapes d'un composant. Les différentes phases impliquées dans le cycle de vie d'un composant réactif sont les suivantes:

1. Initialisation

Cette étape nécessite que le développeur définisse les propriétés et l'état initial du composant. Cela se fait dans le constructeur du composant. Le code suivant montre la phase d'initialisation d'un composant React:

Code:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Montage

Le montage est la phase du cycle de vie de React qui survient une fois l'initialisation terminée. Le montage se produit lorsque le composant est placé sur le conteneur DOM et que le composant est rendu sur une page Web. La phase de montage a deux méthodes qui sont:

• compnentWillMount () : Cette méthode est appelée juste avant que le composant ne soit placé sur DOM, c'est-à-dire que cette fonction est appelée juste avant que la fonction de rendu ne soit exécutée pour la toute première fois.
• componentDidMount () : Cette méthode est appelée juste après que le composant est placé sur DOM, c'est-à-dire que cette fonction est appelée juste après l'exécution de la fonction de rendu. Pour la toute première fois.

Du nom des deux méthodes ci-dessus, nous avons compris la signification des mots-clés «Will» et «Did». Il est maintenant clair que «Will» est utilisé avant un événement particulier et «did» est utilisé après un événement particulier.

3. Mise à jour

La mise à jour est une phase où l'état et les propriétés renseignés au moment de l'initialisation sont modifiés si nécessaire après certains événements utilisateur. Voici différentes fonctions invoquées pendant la phase de mise à jour:

• componentWillReceiveProps (): cette fonction est indépendante de l'état du composant. Cette méthode est appelée avant qu'un composant monté sur DOM obtienne ses accessoires réaffectés. La fonction accepte de nouveaux accessoires qui peuvent être identiques ou différents des accessoires originaux. Principalement, certaines vérifications avant rendu peuvent être appliquées à cette étape.
• shouldComponentUpdate (): Parfois, il est souhaitable de ne pas afficher les nouveaux accessoires sur la page de sortie. Pour ce faire, cette méthode renvoie false, ce qui signifie que les accessoires nouvellement rendus ne doivent pas être affichés sur la page de sortie.
• componentWillUpdate (): cette fonction est appelée avant qu'un composant ne soit rendu de nouveau, c'est-à-dire que cette méthode est appelée une fois avant que la fonction de rendu ne soit exécutée après la mise à jour.
• componentDidUpdate (): cette fonction est appelée après le rendu d'un composant, c'est-à-dire que cette méthode est appelée une fois après l'exécution de la fonction de rendu après la mise à jour.

4. Démontage

Il s'agit de la dernière phase du cycle de vie du composant et dans cette phase, un composant est détaché du conteneur DOM . La méthode suivante s'inscrit dans cette phase.

• componentWillUnmount (): cette fonction est invoquée avant qu'un composant ne soit finalement détaché du conteneur DOM, c'est-à-dire que cette méthode est appelée lorsqu'un composant est complètement supprimé de la page, ce qui indique la fin de son cycle de vie.

Exemple de cycle de vie React

Nous verrons ici quelques exemples de code montrant le cycle de vie d'un composant React.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Lorsque le programme ci-dessus est exécuté initialement, il affichera la sortie ci-dessous sur la page Web.

En cliquant sur la zone Cliquez ici, le texte changera comme suit:

Maintenant, sur la console, vous pouvez voir la séquence de méthodes appelées, la console affichera la sortie ci-dessous:

Après avoir cliqué sur l'écran, un nouveau rendu de l'écran aura lieu et affichera les éléments suivants dans la console:

La sortie de console ci-dessus donne une compréhension claire des méthodes de cycle de vie de réaction invoquées pendant le cycle de vie du composant de réaction.

Conclusion

Après avoir couvert les détails des différentes phases impliquées dans le cycle de vie de React, il est clair qu'il existe des méthodes de cycle de vie qui sont appelées automatiquement. Ces méthodes de cycle de vie à différentes phases d'un composant nous donnent la liberté d'effectuer des événements personnalisés lorsqu'un composant est créé, mis à jour ou détruit. De plus, ces méthodes nous permettent de gérer les accessoires et les changements d'état ainsi que d'intégrer facilement des bibliothèques tierces.

Articles recommandés

Ceci est un guide du cycle de vie de React. Nous discutons ici des phases du cycle de vie de la réaction telles que l'initialisation, le montage, la mise à jour et le démontage avec l'exemple. Vous pouvez également consulter les articles suivants pour en savoir plus -

1. React Native vs React
2. Cycle de vie agile
3. Cycle de vie ITIL
4. Outils de déploiement Java
5. Guide du bouton dans React Native