UseState vs. useReducer i React: Valg af den rigtige State Management Hook

Hvis du vil have et webudviklingsjob, har du en bedre chance for at lykkes, hvis du lærer React JavaScript-biblioteket. React er et af de mest brugte biblioteker i branchen. Og en af ​​de mest interessante funktioner i React-biblioteket er konceptet med kroge.

Hooks er simpelthen JavaScript-funktioner, der isolerer og sætter dig i stand til at genbruge logik i en React-applikation. Til statsforvaltning er der to hovedkroge tilgængelige for dig - den useState krog og brug Reducer krog.

Oversigt over useState Hook

Det useState hook er den mest almindelige måde at håndtere tilstand på i React. Syntaksen nedenfor illustrerer, hvordan du bruger denne krog i din applikation:

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

I kodeblokken ovenfor er stat variabel holder data i hukommelsen mellem gengivelser. Og sætState er "setter"-funktionen, der manipulerer stat variabel.

Det useState hook returnerer et array med præcis to elementer. Den indtager også en startværdi for tilstandsvariablen.

For eksempel, hvis du vil definere en tilstandsvariabel, der repræsenterer brugerens alder, med en startværdi på 17, er det sådan her:

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

Det setUserAge funktion er ansvarlig for at ændre brugerens alder tilstandsvariabel.

setUserAge(19);

Det er vigtigt at bemærke, at opdatering af tilstanden, udløser en komponentgengivelse, og opdatering af en tilstandsvariabel forkert kan resultere i en uendelig løkke, der kan bryde din kode.

I React er det ikke tilrådeligt at ændre tilstanden direkte (som vist i kodeblokken nedenfor), fordi ændringer til ikke-tilstandsvariabler ikke fortsætter mellem komponentgengivelser.

brugerAlder = 19;

Staten er lokal for den komponent, der definerer den. Hvis du har de samme komponenter gengivet på skærmen flere gange, vil hver komponent have sin egen uafhængige tilstand.

fungereApp(){
Vend tilbage (




 </div>
 )
}

I kodeblokken ovenfor er der to Kontakt komponenter, men hver komponent håndterer sin egen tilstand og er ikke afhængig af den anden komponent, medmindre den ene komponent deler sin tilstand med den anden komponent.

React håndterer tilstandsopdateringer ved batching. Det betyder, at når du kalder en tilstandsvariabels setterfunktion, opdateres tilstandsvariablen ikke før næste gengivelse.

Oversigt over brugen Reducer Hook

useReducer er en React hook som kan være praktisk, når du vil håndtere flere relaterede tilstande på samme tid. Syntaksen for brug Reducer ser sådan ud:

konst [tilstand, afsendelse] = useReducer (reducer, initialState)

Sammenlignet med useState, i brug Reducer, der er en stat variabel og en afsendelse funktion, der sender handlinger op til reducering funktion, der håndterer nyttelast og opdaterer stat.

Lad os f.eks. sige, at du bygger en simpel tællerapplikation med knapper, der kan nulstille tælleren, øge tællerværdien eller mindske tællerværdien. Ved brug af useState din kode vil se sådan ud:

fungereTæller(){
konst [count, setCount] = useState(0);
Vend tilbage(


 Antallet er: {count}


 setCount (tæl + 1)}>Forøg antallet</button>
 sætTal(0)}>Nulstil</button>
 setCount (tælle - 1)}>Reducer Antal</button>
 </div>
 </div>
 )
}

Ovenstående implementering fungerer perfekt. Men du kan også opnå de samme resultater ved hjælp af brug Reducer krog.

Dette eksempel er simpelthen beregnet til at demonstrere, hvordan brug Reducer krog virker. I en applikation fra den virkelige verden, brug Reducer er overkill for dette scenarie.

brug Reducer gør det lettere at håndtere relaterede tilstande og kompleks logik baseret på type bestået i det afsendte handling objekt.

For eksempel kunne afsendelsesfunktionen sende en handling objekt, der ser sådan ud:

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

Importer først brug Reducer krog, og definer derefter reducering funktion med parametrene: stat og de destrukturerede handling objekt.

importere {useReducer} fra"reagere";
fungerereducering(tilstand, { type, nyttelast }) {
hvis (type 'antalIncrease') {
Vend tilbage nyttelast;
 } andethvis (type 'countReducase') {
Vend tilbage nyttelast;
 } andethvis (type 'countReset') {
Vend tilbage nyttelast;
 } andet {
Vend tilbage stat;
 }
}

Efter at have defineret reducering funktion, kan du bygge Tæller komponent med brug Reducer krog.

fungereTæller() {
konst [antal, afsendelse] = brugReducer (reducer, 0);
Vend tilbage (


 Antallet er: {count}


 afsendelse({ type: 'antalIncrease', nyttelast: tælle + 1 })}>
 Øg antallet
 </button>
 afsendelse({ type: 'countReset', nyttelast: 0 })}>
 Nulstil tæller
 </button>
 afsendelse({ type: 'countReducase', nyttelast: tælle - 1 })}>
 Øg antallet
 </button>
 </div>
 </div>
 );
}

I kodeblokken ovenfor sender den første knap en handling af typen antal Forøgelse med en nyttelast på tælle + 1. Denne handling er ansvarlig for at øge tælleværdien.

Den anden knap sender en handling af typen tælNulstil med en nyttelast på 0, som nulstiller tælleværdien tilbage til 0.

Den tredje knap sender en handling af typen tæl Fald med en nyttelast på tæller - 1 hvilket reducerer tælleværdien med 1.

Vælg mellem useState og useReducer Hooks

Nu, hvor du forstår, hvordan du bruger useState og brug Reducer kroge, er det vigtigt at vide, hvornår man skal bruge den rigtige.

Hvis din tilstand ikke kræver kompleks logik, så brug naturligvis brug Reducer kan være overdrevent.

Hvis din stat er alt andet end JavaScript-primitiver som tal, strenge og booleske værdier, bør du bruge useState krog. Og hvis tilstandstypen er et objekt eller en matrix, bør du overveje at bruge brug Reducer i stedet.

Efterhånden som din ansøgning vokser i kompleksitet, bliver det vanskeligt at håndtere tilstand med kun useState og brug Reducer kroge.

Det er hvornår du kan bruge eksterne biblioteker som Redux, Jotai og Zustand. Disse biblioteker gør det nemmere at håndtere tilstandsændringer på tværs af flere komponenter.

Gør statsadministration nemmere med JavaScript-biblioteker

Biblioteker som React, Vue og Svelte har alle deres egne måder at håndtere tilstand på. Håndtering af tilstandsstyring på egen hånd med vanilla JavaScript er bestemt noget, du kan prøve, men det er meget nemmere og mere bekvemt at bruge et kamptestet JavaScript-bibliotek.

Hvis du bygger en kompleks applikation ved hjælp af React, hvor du skal administrere flere komponenter, kan Redux være det bedste valg for dig.