UsaStato vs. useReducer in React: scegliere il giusto hook di gestione dello stato

Se vuoi ottenere un lavoro di sviluppo web, avresti maggiori possibilità di successo se impari la libreria React JavaScript. React è una delle librerie più utilizzate nel settore. E una delle caratteristiche più interessanti della libreria React è il concetto di hook.

Gli hook sono semplicemente funzioni JavaScript che isolano e consentono di riutilizzare la logica in un'applicazione React. Per la gestione dello stato, sono disponibili due ganci principali: il useState gancio e il useReducer gancio.

Panoramica dell'hook useState

IL useState hook è il modo più comune per gestire lo stato in React. La sintassi seguente illustra come utilizzare questo hook nella tua applicazione:

cost [state, setState] = useState (initialStateValue);

Nel blocco di codice sopra, il stato la variabile contiene i dati in memoria tra i rendering. E setState è la funzione "setter" che manipola il stato variabile.

IL useState hook restituisce un array con esattamente due elementi. Accetta anche un valore iniziale per la variabile di stato.

Ad esempio, se vuoi definire una variabile di stato che rappresenta l'età dell'utente, con un valore iniziale di 17, ecco come lo faresti:

cost [userAge, setUserAge] = useState(17);

IL setUserAge funzione è responsabile della modifica del file userAge variabile di stato.

setUserAge(19);

È importante notare che l'aggiornamento dello stato, attiva il rendering di un componente e l'aggiornamento improprio di una variabile di stato può provocare un ciclo infinito che può interrompere il codice.

In React, non è consigliabile modificare lo stato direttamente (come mostrato nel blocco di codice seguente), poiché le modifiche alle variabili non di stato non persistono tra i rendering dei componenti.

utenteEtà = 19;

Lo stato è locale rispetto al componente che lo definisce. Se hai gli stessi componenti renderizzati sullo schermo più volte, ogni componente avrà il proprio stato indipendente.

funzioneApp(){
ritorno (




 </div>
 )
}

Nel blocco di codice sopra, ce ne sono due Interruttore componenti, ma ogni componente gestisce il proprio stato e non si basa sull'altro componente a meno che un componente non condivida il proprio stato con l'altro componente.

React gestisce gli aggiornamenti di stato tramite batch. Ciò significa che quando chiami la funzione setter di una variabile di stato, la variabile di stato non viene aggiornata fino al successivo nuovo rendering.

Panoramica dell'usoReducer Hook

useReducer è un hook di React che può tornare utile ogni volta che si desidera gestire più stati correlati contemporaneamente. La sintassi per useReducer assomiglia a questo:

cost [stato, spedizione] = useReducer (reducer, initialState)

Rispetto a useState, In useReducer, c'è un stato variabile e a spedizione funzione che invia azioni fino al riduttore funzione che gestisce i payload e aggiorna il file stato.

Ad esempio, supponiamo che tu stia creando una semplice applicazione contatore con pulsanti che possono azzerare il contatore, aumentare il valore del contatore o diminuire il valore del contatore. Usando useState il tuo codice sarà simile a questo:

funzioneContatore(){
cost [count, setCount] = useState(0);
ritorno(


 Il conteggio è: {count}


 setCount (conta + 1)}>Aumenta conteggio</button>
 impostaConteggio(0)}>Reimposta</button>
 setCount (conteggio - 1)}>Diminuisci conteggio</button>
 </div>
 </div>
 )
}

L'implementazione di cui sopra funziona perfettamente. Ma puoi anche ottenere gli stessi risultati con l'aiuto del useReducer gancio.

Questo esempio ha semplicemente lo scopo di dimostrare come il file useReducer il gancio funziona. In un'applicazione del mondo reale, useReducer è eccessivo per questo scenario.

useReducer semplifica la gestione degli stati correlati e della logica complessa basata su tipo passato nel spedito azione oggetto.

Ad esempio, la funzione dispatch potrebbe inviare un file azione oggetto che assomiglia a questo:

{tipo:"tipo_azione", carico utile:stato * 2}

Prima importa il file useReducer hook, quindi definire il file riduttore funzione con i parametri: stato e il destrutturato azione oggetto.

importare {useReducer} da"reagire";
funzioneriduttore(stato, {tipo, payload}) {
Se (tipo 'contaAumentare') {
ritorno carico utile;
 } altroSe (tipo 'contaDiminuisci') {
ritorno carico utile;
 } altroSe (tipo 'countReset') {
ritorno carico utile;
 } altro {
ritorno stato;
 }
}

Dopo aver definito il riduttore funzione, puoi costruire il Contatore componente con il useReducer gancio.

funzioneContatore() {
cost [count, dispatch] = useReducer (riduttore, 0);
ritorno (


 Il conteggio è: {count}


 spedizione({ tipo: 'contaAumentare', carico utile: contare + 1 })}>
 Aumenta il conteggio
 </button>
 spedizione({ tipo: 'countReset', carico utile: 0 })}>
 Azzera il conteggio
 </button>
 spedizione({ tipo: 'contaDiminuisci', carico utile: contare - 1 })}>
 Aumenta il conteggio
 </button>
 </div>
 </div>
 );
}

Nel blocco di codice sopra, il primo pulsante invia un'azione di tipo contareAumentare con un carico utile di contare + 1. Questa azione è responsabile dell'incremento del valore di conteggio.

Il secondo pulsante invia un'azione di tipo countReset con un payload pari a 0 che reimposta il valore di conteggio su 0.

Il terzo pulsante invia un'azione di tipo contareDiminuire con un carico utile di contare - 1 che diminuisce il valore del conteggio di 1.

Scelta tra useState e useReducer Hooks

Ora, che capisci come usare useState E useReducer ganci, è importante sapere quando usare quello giusto.

Se il tuo stato non richiede una logica complessa, ovviamente usando useReducer può essere eccessivo.

Se il tuo stato è tutt'altro Primitive JavaScript come numeri, stringhe e valori booleani, dovresti usare il useState gancio. E se il tipo di stato è un oggetto o un array, dovresti prendere in considerazione l'utilizzo useReducer Invece.

Man mano che la tua applicazione cresce in complessità, diventa difficile gestire lo stato solo con il useState E useReducer ganci.

Questo è quando puoi usare librerie esterne come Redux, Jotai e Zustand. Queste librerie semplificano la gestione dei cambiamenti di stato tra più componenti.

Semplificare la gestione dello stato con le librerie JavaScript

Librerie come React, Vue e Svelte hanno tutte le proprie modalità di gestione dello stato. Gestire la gestione dello stato da soli con JavaScript vanilla è sicuramente qualcosa che puoi provare, ma è molto più semplice e conveniente utilizzare una libreria JavaScript testata in battaglia.

Se stai creando un'applicazione complessa utilizzando React in cui devi gestire diversi componenti, Redux potrebbe essere la scelta migliore per te.