web-dev-qa-db-fra.com

Comment utiliser componentWillMount () dans les crochets à réaction?

Dans les documents officiels de React, il est mentionné - 

Si vous connaissez les méthodes du cycle de vie de la classe React, vous pouvez penser of useEffect Hook en tant que composantDidMount, composantDidUpdate et composantWillUnmount combiné.

Ma question est la suivante: comment pouvons-nous utiliser la méthode du cycle de vie componentWillMount() dans un crochet?

javascriptreactjsjsxreact-hooks
3
Abrar

Vous ne pouvez utiliser aucune des méthodes de cycle de vie existantes (composantDidMount, composantDidUpdate, composantWillUnmount, etc.) dans un hook. Elles ne peuvent être utilisées que dans des composants de classe. Et les crochets, vous ne pouvez utiliser que dans des composants fonctionnels. Qu'est-ce que la ligne ci-dessous du document React 

Si vous connaissez les méthodes du cycle de vie de la classe React, vous pouvez imaginer useEffect Hook comme composantDidMount, composantDidUpdate et composantWillUnmount combinés.

suggérer est que vous pouvez imiter cette méthode de cycle de vie à partir d'un composant de classe dans un composant fonctionnel.

Le code dans composantDidMount est exécuté une fois lorsque le composant est monté. Le crochet équivalent à useEffect pour ce comportement est 

useEffect(() => {
  // Your code here
}, []);

Notez le deuxième paramètre ici (tableau vide). Cela ne fonctionnera qu'une fois.

Sans le second paramètre le hook useEffect sera appelé à chaque rendu du composant pouvant être dangereux.

useEffect(() => {
  // Your code here
});

composantWillUnmount est utilisé pour le nettoyage (comme supprimer des listes d'événements, annuler le minuteur, etc.). Supposons que vous ajoutiez un listner d’événements dans composantDidMount et le renvoyiez dans composantWillUnmount comme indiqué ci-dessous.

componentDidMount() {
  window.addEventListner('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListner('mousemove', () => {})
}

L'équivalent crochet du code ci-dessus sera

useEffect(() => {
  window.addEventListner('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListner('mousemove', () => {})
  }
}, [])
14
Bhaskar Gyan Vardhan

Selon reactjs.org, composantWillMount ne sera plus pris en charge à l'avenir . https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Il n'est pas nécessaire d'utiliser ComponentWillMount.

Si vous voulez faire quelque chose avant que le composant ne soit monté, faites-le simplement dans le constructeur ().

Si vous souhaitez effectuer des requêtes réseau, ne le faites pas dans composantWillMount. C'est parce que cela conduira à des bugs inattendus. 

Les requêtes réseau peuvent être effectuées dans composantDidMount.

J'espère que ça aide.

4
MING WU

https://reactjs.org/docs/hooks-reference.html#usememo

Rappelez-vous que la fonction passée à useMemo s'exécute pendant le rendu . Ne faites rien là-bas que vous ne feriez pas normalement lors du rendu . Par exemple, les effets secondaires appartiennent à useEffect et non à useMemo.

1
user11041494