UseState vs. useReducer i React: Velge den riktige State Management Hook

Hvis du ønsker å få en webutviklingsjobb, vil du ha større sjanse for å lykkes hvis du lærer deg React JavaScript-biblioteket. React er et av de mest brukte bibliotekene i bransjen. Og en av de mest interessante egenskapene til React-biblioteket er konseptet med kroker.

Hooks er ganske enkelt JavaScript-funksjoner som isolerer og lar deg gjenbruke logikk i en React-applikasjon. For statlig ledelse er det to hovedkroker tilgjengelig for deg – den useState krok og brukReducer krok.

Oversikt over useState Hook

De useState krok er den vanligste måten å håndtere tilstand på i React. Syntaksen nedenfor illustrerer hvordan du bruker denne kroken i applikasjonen din:

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

I kodeblokken ovenfor vises stat variabel holder data i minnet mellom gjengivelser. Og setState er "setter"-funksjonen som manipulerer stat variabel.

De useState hook returnerer en matrise med nøyaktig to elementer. Den tar også inn en startverdi for tilstandsvariabelen.

Hvis du for eksempel ønsker å definere en tilstandsvariabel som representerer alderen til brukeren, med en startverdi på 17, er det slik du vil gjøre det:

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

De setUserAge funksjonen er ansvarlig for å endre brukerAlder tilstandsvariabel.

setUserAge(19);

Det er viktig å merke seg at oppdatering av tilstanden, utløser en komponentgjengivelse og feilaktig oppdatering av en tilstandsvariabel kan resultere i en uendelig sløyfe som kan bryte koden din.

I React er det ikke tilrådelig å modifisere tilstanden direkte (som vist i kodeblokken nedenfor), fordi endringer i ikke-tilstandsvariabler ikke vedvarer mellom komponentgjengivelser.

brukerAlder = 19;

Staten er lokal for komponenten som definerer den. Hvis du har de samme komponentene gjengitt på skjermen flere ganger, vil hver komponent ha sin egen uavhengige tilstand.

funksjonApp(){
komme tilbake (




 </div>
 )
}

I kodeblokken ovenfor er det to Bytte om komponenter, men hver komponent håndterer sin egen tilstand og er ikke avhengig av den andre komponenten med mindre en komponent deler sin tilstand med den andre komponenten.

React håndterer tilstandsoppdateringer ved batching. Dette betyr at når du kaller en tilstandsvariabels setterfunksjon, oppdateres ikke tilstandsvariabelen før neste gjengivelse.

Oversikt over bruken Reducer Hook

useReducer er en React-krok som kan komme godt med når du ønsker å håndtere flere relaterte tilstander samtidig. Syntaksen for brukReducer ser omtrent slik ut:

konst [state, dispatch] = useReducer (reducer, initialState)

Sammenlignet med useState, i brukReducer, det er en stat variabel og en utsendelse funksjon som sender handlinger opp til redusering funksjon som håndterer nyttelast og oppdaterer stat.

La oss for eksempel si at du bygger en enkel tellerapplikasjon med knapper som kan nullstille telleren, øke tellerverdien eller redusere tellerverdien. Ved hjelp av useState koden din vil se omtrent slik ut:

funksjonDisk(){
konst [count, setCount] = useState(0);
komme tilbake(


 Antallet er: {count}


 setCount (tell + 1)}>Øk antallet</button>
 setCount(0)}>Tilbakestill</button>
 setCount (tell - 1)}>Reduser antall</button>
 </div>
 </div>
 )
}

Implementeringen ovenfor fungerer perfekt. Men du kan også oppnå de samme resultatene ved hjelp av brukReducer krok.

Dette eksemplet er ganske enkelt ment å demonstrere hvordan brukReducer krok fungerer. I en applikasjon fra den virkelige verden, brukReducer er overkill for dette scenariet.

brukReducer gjør det lettere å håndtere relaterte tilstander og kompleks logikk basert på type bestått i utsendt handling gjenstand.

For eksempel kan ekspedisjonsfunksjonen sende en handling objekt som ser omtrent slik ut:

{type:"action_type", nyttelast:stat * 2}

Importer først brukReducer krok, definer deretter redusering funksjon med parameterne: stat og de destrukturerte handling gjenstand.

import {useReducer} fra"reagere";
funksjonredusering(tilstand, { type, nyttelast }) {
hvis (type 'antalløkning') {
komme tilbake nyttelast;
 } ellershvis (type 'countReduction') {
komme tilbake nyttelast;
 } ellershvis (type 'countReset') {
komme tilbake nyttelast;
 } ellers {
komme tilbake stat;
 }
}

Etter å ha definert redusering funksjon, kan du bygge Disk komponent med brukReducer krok.

funksjonDisk() {
konst [telling, utsendelse] = brukReducer (redusering, 0);
komme tilbake (


 Antallet er: {count}


 sending({ type: 'antalløkning', nyttelast: telle + 1 })}>
 Øk antallet
 </button>
 sending({ type: 'countReset', nyttelast: 0 })}>
 Tilbakestill tellingen
 </button>
 sending({ type: 'countReduction', nyttelast: telle - 1 })}>
 Øk antallet
 </button>
 </div>
 </div>
 );
}

I kodeblokken ovenfor sender den første knappen en handling av typen antall Økning med en nyttelast på telle + 1. Denne handlingen er ansvarlig for å øke telleverdien.

Den andre knappen sender en handling av typen countReset med en nyttelast på 0 som tilbakestiller telleverdien til 0.

Den tredje knappen sender en handling av typen telleReduksjon med en nyttelast på telle - 1 som reduserer telleverdien med 1.

Velge mellom useState og useReducer Hooks

Nå forstår du hvordan du bruker useState og brukReducer kroker, er det viktig å vite når du skal bruke den rette.

Hvis staten din ikke krever kompleks logikk, så bruker du åpenbart brukReducer kan være overkill.

Hvis staten din er noe annet enn JavaScript-primitiver som tall, strenger og boolske verdier, bør du bruke useState krok. Og hvis tilstandstypen er et objekt eller en matrise, bør du vurdere å bruke brukReducer i stedet.

Etter hvert som søknaden din vokser i kompleksitet, blir det vanskelig å håndtere tilstanden med bare useState og brukReducer kroker.

Dette er når du kan bruke eksterne biblioteker som Redux, Jotai og Zustand. Disse bibliotekene gjør det lettere å håndtere tilstandsendringer på tvers av flere komponenter.

Gjør statsadministrasjon enklere med JavaScript-biblioteker

Biblioteker som React, Vue og Svelte har alle sine egne måter å håndtere staten på. Å håndtere statsadministrasjon på egen hånd med vanilla JavaScript er definitivt noe du kan prøve, men det er mye enklere og mer praktisk å bruke et kamptestet JavaScript-bibliotek.

Hvis du bygger en kompleks applikasjon ved hjelp av React der du trenger å administrere flere komponenter, kan Redux være det beste valget for deg.