J'essaie de comprendre le useEffect
crochet en profondeur.
Je voudrais savoir quand utiliser quelle méthode et pourquoi?
1.useEffect with no second paraments
useEffect(()=>{})
2.useEffect with second paraments as []
useEffect(()=>{},[])
3.useEffect with some arguments passed in the second parameter
useEffect(()=>{},[arg])
javascript
reactjs
react-redux
John_ny
la source
la source
Réponses:
Fonctionne sur chaque rendu de composant.
Généralement utilisé pour le débogage, analogue à l'exécution du corps de la fonction sur chaque rendu:
S'exécute une fois sur un support de composant.
Généralement utilisé pour initialiser l'état des composants par extraction de données, etc.
Fonctionne en cas de changement de
arg
valeur."On Change" fait référence à une comparaison superficielle avec la valeur précédente de
arg
(compare la valeur dearg
du rendu précédent et du rendu actuelprevArg === arg ? Do nothing : callback()
).Habituellement utilisé pour exécuter des événements sur les accessoires / le changement d'état.
useEffect
par Dan AbramovuseEffect
API .la source
Si vous connaissez les méthodes de cycle de vie de la classe React, vous pouvez penser à useEffect Hook en tant que componentDidMount, componentDidUpdate et componentWillUnmount combinés.
1. useEffect sans second paramètre: Ceci est utilisé lorsque nous voulons que quelque chose se produise soit lorsque le composant vient d'être monté, soit s'il a été mis à jour. Conceptuellement, nous voulons que cela se produise après chaque rendu.
2. useEffect avec les deuxièmes paramètres comme []: Ceci est utilisé lorsque nous voulons que quelque chose se produise au moment du montage du composant, s'il ne s'exécute qu'une seule fois au moment du montage.Il est plus proche des composants familiersDidMount et componentWillUnmount.
3. useEffect avec quelques arguments passés dans le deuxième paramètre: Ceci est utilisé lorsque nous voulons que quelque chose se passe au moment où le pramter est passé par exemple. les arguments ont changé dans votre cas.
Pour plus d'informations. vérifiez ici: https://reactjs.org/docs/hooks-effect.html
la source
3.useEffect avec quelques arguments passés dans le deuxième paramètre useEffect (() => {}, [arg])
il s'exécutera en premier, puis il s'exécutera à nouveau si le changement d'argument
Vous oubliez également de demander ce qu'il en est du retour à l'intérieur de useEffect ... Ses utilisations pour le nettoyage s'exécuteront lors du démontage du composant
la source