In questo articolo, tratteremo l'hook più importante e migliore chiamato useEffect() .

Nota -

Ho anche scritto un blog sulle basi di React Hooks e useState hook , quindi se sei nuovo in React o vuoi rispolverare, dovresti assolutamente dare un'occhiata.

Prerequisito —

Dovresti conoscere le basi di HTML, JavaScript, React e come funziona React, e le basi degli hook di React ( il link per le basi degli hook di React e l' hook useState è fornito sopra ).

E se soddisfi questi prerequisiti, allora sei a posto .

Quindi, prima di capire cos'è l'hook useEffect, dobbiamo capire qual è esattamente il ciclo di vita del componente React .

Che cos'è il ciclo di vita dei componenti di React?

• Come suggerisce il nome, il ciclo di vita dei componenti di React è fondamentalmente il ciclo di vita di qualsiasi componente in React.
• Ci sono principalmente tre fasi di qualsiasi componente in React:
• Il primo è quando il componente viene creato e montato o utilizzato sulla nostra app Web (nota come componentDidMount ).
• Il secondo è quando lo stato di quel componente viene modificato da iniziale a un determinato stato (noto come componentDidUpdate ).
• E il terzo e ultimo è quando il componente viene smontato o rimosso dalla nostra app Web (noto come componentWillUnmount ).

Qual è il gancio useEffect?

• Quindi, useEffect è un hook in React che viene utilizzato per eseguire alcune operazioni o attivare/chiamare alcune funzioni ogni volta che il nuovo componente viene visualizzato in un'app Web ( componentDidMount phase of lifecycle ) o quando lo stato del componente esistente viene aggiornato ( componentDidUpdate phase of lifecycle ) o quando il componente esistente viene rimosso dall'app Web ( componentWillUnmount phase of lifecycle ).
• In parole semplici, l'hook useEffect viene utilizzato per gestire il ciclo di vita del componente React.
• Quindi principalmente ci sono tre casi d'uso o hook useEffect:
• Per eseguire alcune funzioni quando viene eseguito il rendering del componente.
• Per eseguire alcune funzioni quando il componente viene aggiornato.
• Per eseguire alcune funzioni quando il componente viene eliminato.

useEffect(function (){
    //Code that you want to perform
},[parameters])

Quindi, questa è la sintassi di base dell'hook useEffect. E non preoccuparti se non capisci. Dopo aver letto la parte di esempio, il tuo concetto sul gancio useEffect sarà chiarissimo.

Codice Esempio di useState —

In questa sezione creerò un semplice contatore usando useEffect e useState hook in modo da poter capire facilmente come funziona useEffect e quando usarlo.

1. useEffect per componentDidMount —

• Codice -
• Output e spiegazione del codice —

• Quindi nel codice sopra indicato quello che abbiamo fatto è stato creato un semplice contatore usando useState hook e il valore della countvariabile di stato aumenterà di 1 ogni volta che facciamo clic sul increase(+)pulsante.
• In Code, abbiamo anche usato useEffect hook per l'evento componentDidMount.
• Quindi quello che abbiamo fatto in questo hook useEffect è che abbiamo fornito una funzione che lo farà console.log(“This will be print only one time when component get rendered”)e nell'array dei parametri, abbiamo passato un array vuoto ( []). Ora, questo tipo di sintassi dell'hook useEffect funzionerà come evento componentDidMount, quindi questo console.log verrà attivato solo una volta quando viene eseguito il rendering del componente (in altre parole quando viene eseguito il rendering del contatore).
• Codice -
• Output e spiegazione del codice —

• La spiegazione del codice è quasi la stessa del componente precedenteDidMount.
• L'unica differenza è nell'hook useEffect, in questo codice abbiamo passato una funzione nell'hook useEffect e nell'array parametri abbiamo passato una variabile di stato chiamata count( ) quindi ciò significa che verrà attivato solo quando il componente ottiene montato e quando lo stato variabile cambia.[count]count
• Quindi questo codice si attiverà console.log(“This will be print when component get rendered and whenever component get updated”)ogni volta che viene eseguito il rendering del componente e ogni volta che il componente viene aggiornato (nel nostro esempio ogni volta che viene eseguito il rendering del contatore e ogni volta che il valore della variabile di conteggio viene aggiornato.) Quindi qui puoi vedere 6 volte viene stampato (1 volta quando viene eseguito il rendering del componente e altre 5 volte quando il valore di conteggio viene aggiornato da 0 a 4).“This will be print when component get rendered and whenever component get updated”
• Output e spiegazione del codice —

• Qui in questo esempio di codice quello che abbiamo fatto è stato creare un componente fittizio chiamato LifecycleDemoin cui abbiamo usato useEffect come evento componentWillUnmount .
• Ma prima di capire che capiremo il codice del componente principale dell'App .
• Quindi nel componente App ciò che abbiamo fatto è stato creare una variabile di stato chiamata emount a cui è stato assegnato un valore predefinito true e ha creato una funzione chiamata toggle che alternerà il valore della variabile di statomount da true a false o false a true.
• Quindi, ogni volta che facciamo clic sul “lifecycle button”valore Mostra della variabile di stato di montaggio diventa true e la condizione per la riga-24 diventa vera e il LifecycleDemocomponente diventa visibile. E quando facciamo clic sul pulsante "Nascondi ciclo di vita" , verrà smontato o rimosso il LifecycleDemocomponente dall'app .
• Quindi ora, dopo aver compreso il codice del componente dell'app , vedremo il LifecycleDemocomponente in cui abbiamo utilizzato l'hook useEffect .
• Quindi in useEffect hook quello che abbiamo fatto è nella funzione di useEffect e in quella funzione abbiamo restituito un'altra funzione che ha console.log(“render !”)console.log("unmounting…").
• Quindi ogni volta che montiamo il LifecycleDemo componente console.logviene attivato per la prima volta e ogni volta che smontiamo, la parte di ritorno di quella funzione viene attivata.
• Come puoi vedere in GIF prima quando l'app viene caricata “render !” stampata e quando smontiamo il componente “unmounting…”viene stampato .
• Quindi, se vogliamo eseguire alcune attività quando il componente viene smontato , dobbiamo eseguirlo in cambio di parte dell'hook useEffect .
• Per la creazione di progetti in React (copre la chiamata API, useEffect, useState, ecc.) —
Creazione di un'app Web per recuperare informazioni su Numbers utilizzando React e Axios da NumbersAPI.
• Per le nozioni di base sulle strutture di dati —

In questo articolo, abbiamo trattato le basi di React Components Lifecycle, cos'è useEffect hook, come funziona e come implementarlo .

Spero che vi sia piaciuto leggere e imparare.

Se ti è piaciuto questo articolo, dai un applauso a questo e condividilo con quante più persone possibile in modo che anche loro possano imparare da esso. E se ti piace leggere questo tipo di articolo, seguimi .

Connettiti con me—

Altri contenuti su plainenglish.io