Avant React 16.8, nous étions obligés d'utiliser un composant basé sur une classe pour avoir accès au cycle de vie du composant. Et maintenant, avec Hooks, nous sommes maintenant en mesure d'utiliser des composants fonctionnels pour la gestion des états, la récupération de données, etc.
Sorry for the interrupt!
If you're interested in learning React in a comprehensive way, I highly recommend this bestseller course: React - The Complete Guide (incl Hooks, React Router, Redux)
It's an affiliate link, so by purchasing, you support the blog at the same time.1. componentDidMount
La méthode componentDidMount() s'exécute après que la sortie du composant a été rendue dans le DOM. C'est un bon endroit pour provoquer des effets secondaires.
// With ccomponentDidMount()
componentDidMount() {
console.log('Hello World');
}
// with useEffect()
useEffect(() => {
console.log('Hello World');
}, [])Si nous ne transmettons pas de tableau vide à useEffect, il s'exécutera à chaque modification. Par conséquent, nous devons donner comme deuxième argument un tableau vide pour imiter le comportement componentDidMount. Il indique à React que votre effet ne dépend d'aucune valeur des accessoires ou de l'état, il n'a donc jamais besoin d'être réexécuté, useEffect ne s'exécutera qu'une seule fois après la création du composant.
2. componentDidUpdate
La méthode componentDidUpdate() est invoquée immédiatement après la mise à jour.
// With ccomponentDidUpdate()
componentDidUpdate(prevProps) {
console.log(`Hello World ${prevProps}`);
}
// with useEffect()
useEffect(() => {
console.log('Hello World');
}, [prevProps])Lorsque nous transmettons une valeur (prevProps) au tableau, il indique à useEffect de s'exécuter uniquement si la valeur change.
3. componentWillUnmount
La méthode componentWillUnmount() est appelée immédiatement avant qu'un composant ne soit démonté et détruit. C'est un bon endroit pour faire des travaux de nettoyage.
// With ccomponentDidUnmount()
componentWillUnmount() {
console.log('Hello World');
}
// with useEffect()
useEffect(() => {
console.log('Hello World');
return () => {
console.log('Do some cleanup');
}
}, [])En renvoyant une fonction anonyme avec useEffect, elle s'exécutera avant le démontage du composant. Et le tableau vide passé comme deuxième argument indique à useEffect de s'exécuter lorsque le composant sera monté ou démonté.
