Reagieren Sie useEffect in der Tiefe / use of useEffect?

Ich versuche den useEffectHaken 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])

useEffect(callback)

Läuft auf jedem Komponenten-Rendering.

Wird normalerweise zum Debuggen verwendet, analog zur Ausführung des Funktionskörpers bei jedem Rendering:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Wird einmal auf einem Komponenten-Mount ausgeführt.

Wird normalerweise zum Initialisieren des Komponentenzustands durch Datenabruf usw. verwendet.

Hinweis : Die Callback ausgeführt , nachdem die Phase machen (bekannt „Gotcha“).

useEffect(callback,[arg])

Läuft auf Änderung des argWertes.

"Bei Änderung" bezieht sich auf einen flachen Vergleich mit dem vorherigen Wert von arg(vergleicht den Wert des argvorherigen und des aktuellen Renderings prevArg === arg ? Do nothing : callback()).

Wird normalerweise verwendet, um Ereignisse für Requisiten / Statusänderungen auszuführen.

Hinweis: Es können mehrere Abhängigkeiten angegeben werden: [arg1,arg2,arg3...]

• Eine vollständige Anleitung useEffectvon Dan Abramov
• useEffectAPI .
• Verwenden des Effekt-Hooks - Reagieren Sie Dokumente.

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

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