Ich versuche den useEffect
Haken gründlich zu verstehen .
Ich würde gerne wissen, wann und warum ich welche Methode anwenden soll.
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
quelle
quelle
Antworten:
Läuft auf jedem Komponenten-Rendering.
Wird normalerweise zum Debuggen verwendet, analog zur Ausführung des Funktionskörpers bei jedem Rendering:
Wird einmal auf einem Komponenten-Mount ausgeführt.
Wird normalerweise zum Initialisieren des Komponentenzustands durch Datenabruf usw. verwendet.
Läuft auf Änderung des
arg
Wertes."Bei Änderung" bezieht sich auf einen flachen Vergleich mit dem vorherigen Wert von
arg
(vergleicht den Wert desarg
vorherigen und des aktuellen RenderingsprevArg === arg ? Do nothing : callback()
).Wird normalerweise verwendet, um Ereignisse für Requisiten / Statusänderungen auszuführen.
useEffect
von Dan AbramovuseEffect
API .quelle
Wenn Sie mit den Lebenszyklusmethoden der React-Klasse vertraut sind, können Sie sich useEffect Hook als kombinierte KomponentenDidMount, KomponentenDidUpdate und KomponentenWillUnmount vorstellen.
1.useEffect ohne zweite Parameter: Dies wird verwendet, wenn etwas passieren soll, entweder wenn die Komponente gerade gemountet wurde oder wenn sie aktualisiert wurde. Konzeptionell möchten wir, dass dies nach jedem Rendern geschieht.
2.useEffect mit zweiten Parametern als []: Dies wird verwendet, wenn zum Zeitpunkt des Mountens der Komponente etwas passieren soll, wenn es zum Zeitpunkt des Mountens nur einmal ausgeführt wird. Es liegt näher an den bekannten KomponentenDidMount und componentWillUnmount.
3.useEffect mit einigen im zweiten Parameter übergebenen Argumenten: Dies wird verwendet, wenn zu dem Zeitpunkt, zu dem der Pramter übergeben wurde, z. Die Argumente haben sich in Ihrem Fall geändert.
Für mehr Information. Überprüfen Sie hier: https://reactjs.org/docs/hooks-effect.html
quelle
3.useEffect mit einigen im zweiten Parameter übergebenen Argumenten useEffect (() => {}, [arg])
Es wird zuerst ausgeführt, dann wird es erneut ausgeführt, wenn sich arg ändert
Sie vergessen auch zu fragen, was mit der Rückgabe innerhalb des useEffect zu tun hat ... Die Verwendung für die Bereinigung wird ausgeführt, wenn die Komponente demontiert wird
quelle