Reagisci usoEffetto in profondità / uso dell'usoEffetto?

Sto cercando di capire il useEffectgancio in profondità.

Vorrei sapere quando utilizzare quale metodo e perché?

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)

Funziona su ogni rendering dei componenti.

Utilizzato in genere per il debug, analogo all'esecuzione del corpo della funzione su ogni rendering:

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

useEffect(callback,[])

Viene eseguito una volta su un componente mount.

Solitamente utilizzato per inizializzare lo stato dei componenti mediante il recupero dei dati, ecc.

Nota : il callback eseguito dopo la fase di rendering (noto "Gotcha").

useEffect(callback,[arg])

Funziona con cambio di argvalore.

"In modifica" si riferisce al confronto superficiale con il valore precedente di arg(confronta il valore argtra il rendering precedente e quello corrente prevArg === arg ? Do nothing : callback()).

Solitamente utilizzato per eseguire eventi su oggetti di scena / cambio di stato.

Nota: è possibile fornire più dipendenze: [arg1,arg2,arg3...]

• Una guida completa a useEffectdi Dan Abramov
• useEffectAPI .
• Usando l'hook dell'effetto - Reagisci ai documenti.

Se hai familiarità con i metodi del ciclo di vita della classe React, puoi pensare a useEffect Hook come componentDidMount, componentDidUpdate e componentWillUnmount combinati.

1.useEffect senza secondi parametri: viene utilizzato quando vogliamo che qualcosa accada quando il componente è appena montato o se è stato aggiornato. Concettualmente, vogliamo che accada dopo ogni rendering.

2.useEffect with second paraments as []: viene utilizzato quando vogliamo che qualcosa accada al momento del montaggio del componente, se eseguito solo una volta al momento del montaggio. È più vicino al familiare componente DidMount e componentWillUnmount.

3.useEffect con alcuni argomenti passati nel secondo parametro: Questo è usato quando vogliamo che qualcosa accada nel momento in cui il pramter è passato ad es. args è cambiato nel tuo caso.

Per maggiori informazioni. controlla qui: https://reactjs.org/docs/hooks-effect.html

3.useEffect con alcuni argomenti passati nel secondo parametro useEffect (() => {}, [arg])

verrà eseguito per primo, quindi verrà eseguito nuovamente se arg cambia

Dimentica anche di chiedere il ritorno all'interno di useEffect ... I suoi usi per la pulizia verranno eseguiti quando si smonta il componente