Nozioni di base su React Hooks, useState Hooks

In questa storia tratteremo tutte le nozioni di base sugli hook di reazione e impareremo a conoscere il hook di reazione integrato chiamato useState().

Prerequisito —

Dovresti conoscere le basi di HTML, Javascript, cos'è React e come funziona .

E se soddisfi questi prerequisiti, allora sei a posto .

Che cos'è React Hooks?

• I React Hook sono stati introdotti in React 16.8 .
• Gli hook di React sono fondamentalmente funzioni che ti consentono di gestire lo stato dell'app web e ti consentono di lavorare facilmente con altre funzionalità di React come componenDidMount() , componenDidUpdate() senza scrivere class .
• È possibile utilizzare gli hook React solo nei componenti funzionali , non nei componenti definiti dalla classe.
• In parole semplici, possiamo definire gli hook di reazione come funzioni che ti consentono di "agganciare" lo stato di React e le caratteristiche del ciclo di vita dai componenti funzionali .
• Esistono molti tipi di hook React integrati —

1. useState()
2. useEffect()
3. useContext()

1. useReducer()
2. useRef()
3. useCallback()
4. useMemo()

Che cos'è useState?

• useState è uno degli hook React più comuni e più utilizzati.
• useState viene utilizzato come hook di gestione dello stato di un particolare componente.
• useState hook viene utilizzato per gestire lo stato dei nostri componenti.
• useState ci consente di creare e gestire variabili di stato in modo semplice e conveniente.
• In useState impostiamo lo stato iniziale della variabile di stato e utilizziamo la funzione definita da useState per cambiare lo stato di quella variabile di stato dallo stato iniziale allo stato corrente .
• Possiamo usare useState solo in componenti funzionali non in componenti basati su classi .
• useState è uguale a this.statee nei componenti basati sulla classethis.setState React .
• Non preoccuparti, se non capisci correttamente state e useState, sarà completamente chiaro nella tua testa una volta che lo capirai dall'esempio di codice.

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

• Codice -
• Codice Spiegazione —
• Nella riga di questo codice abbiamo importato useStatehook da ‘react’.
• Successivamente creeremo un componente funzionale chiamato Appnel file App.js.
• In quel componente funzionale creeremo la variabile di stato chiamata count e la funzione useState chiamata setCount.
• Alla 6a riga di questo codice stiamo usando l'hook useState in cui abbiamo chiamato la variabile di stato count e per cambiare lo stato di quel conteggio abbiamo creato una funzione chiamata setCount.
• Qui in useState(0)0 indica lo stato iniziale di count stato varibale. Quindi all'inizio, quando il nostro componente App carica, il valore della count variabile di stato sarà 0. E usando setCountil metodo saremo in grado di modificare il valore della count variabile di stato.
• Ora abbiamo creato un metodo chiamato decreamentche diminuirà il count valore della variabile di stato di 1 ogni volta che si fa clic sul pulsante (decrement -) . Fondamentalmente ciò che fa questo metodo è che imposterà lo stato della countvariabile count-1sull'utilizzo del setCountmetodo.
• Ora abbiamo creato un metodo chiamato increamentche incrementerà il count valore della variabile di stato di 1 ogni volta che si fa clic sul pulsante (incremento +) . Fondamentalmente ciò che fa questo metodo è che imposterà lo stato della countvariabile count+1sull'utilizzo del setCountmetodo.
• Nella return sezione di questo codice è autoesplicativo e nel pulsante ( incremento +) abbiamo passato il increament metodo onClick nell'evento e nel pulsante (decrementa-) abbiamo passato il decreamentmetodo.

Conclusione

Quindi, qui in questo articolo, abbiamo trattato le basi degli hook React e cos'è useState hook, come funziona e come implementarlo .

Spero che vi sia piaciuto leggere e imparare.

Se ti è piaciuto questo articolo, sentiti libero di lasciare un applauso e condividerlo con gli altri in modo che anche loro possano imparare da esso.