UseState vs. useReducer v React: Výber správneho háku riadenia stavu

Ak sa chcete zamestnať v oblasti vývoja webu, budete mať väčšiu šancu uspieť, ak sa naučíte knižnicu React JavaScript. React je jednou z najpoužívanejších knižníc v tomto odvetví. A jednou z najzaujímavejších funkcií knižnice React je koncept háčikov.

Háky sú jednoducho funkcie JavaScriptu, ktoré izolujú a umožňujú opätovné použitie logiky v aplikácii React. Pre riadenie štátu máte k dispozícii dva hlavné háčiky – useState hák a useReducer háčik.

Prehľad použitiaState Hook

The useState hák je najbežnejším spôsobom spracovania stavu v React. Nižšie uvedená syntax ilustruje, ako používať tento háčik vo vašej aplikácii:

konšt [state, setState] = useState (InitialStateValue);

Vo vyššie uvedenom bloku kódu je štát premenná uchováva dáta v pamäti medzi rendermi. A setState je funkcia "setter", ktorá manipuluje s štát premenlivý.

The useState hook vráti pole s presne dvoma prvkami. Preberá tiež počiatočnú hodnotu pre stavovú premennú.

Napríklad, ak chcete definovať stavovú premennú, ktorá predstavuje vek používateľa, s počiatočnou hodnotou 17, postupujte takto:

konšt [userAge, setUserAge] = useState(17);

The setUserAge funkcia je zodpovedná za úpravu užívateľský vek stavová premenná.

setUserAge(19);

Je dôležité poznamenať, že aktualizácia stavu, spúšťanie vykresľovania komponentu a nesprávna aktualizácia stavovej premennej môže viesť k nekonečnej slučke, ktorá môže prerušiť váš kód.

V Reacte nie je vhodné upravovať stav priamo (ako je znázornené v bloku kódu nižšie), pretože zmeny nestavových premenných nepretrvajú medzi rendermi komponentov.

userVek = 19;

Stav je lokálny pre komponent, ktorý ho definuje. Ak máte rovnaké komponenty vykreslené na obrazovke viackrát, každý komponent bude mať svoj vlastný nezávislý stav.

funkciuApp(){
vrátiť (




 </div>
 )
}

Vo vyššie uvedenom bloku kódu sú dva Prepínač komponenty, ale každý komponent spracováva svoj vlastný stav a nespolieha sa na druhý komponent, pokiaľ jeden komponent nezdieľa svoj stav s druhým komponentom.

React spracováva aktualizácie stavu dávkovaním. To znamená, že keď zavoláte funkciu nastavovača stavovej premennej, stavová premenná sa aktualizuje až pri ďalšom opätovnom vykreslení.

Prehľad použitiaReducer Hook

useReducer je hák React ktoré sa môžu hodiť vždy, keď chcete zvládnuť viacero súvisiacich stavov súčasne. Syntax pre useReducer vyzerá asi takto:

konšt [stav, odoslanie] = useReducer (reduktor, počiatočný stav)

V porovnaní s useState, v useReducer, existuje a štát variabilné a a odoslanie funkcia, ktorá odosiela akcie až do reduktor funkcia, ktorá spracováva užitočné zaťaženie a aktualizuje štát.

Povedzme napríklad, že vytvárate jednoduchú aplikáciu počítadla s tlačidlami, ktoré môžu vynulovať počítadlo, zvýšiť hodnotu počítadla alebo znížiť hodnotu počítadla. Použitím useState váš kód bude vyzerať asi takto:

funkciuPočítadlo(){
konšt [count, setCount] = useState(0);
vrátiť(


 Počet je: {count}


 setCount (count + 1)}>Zvýšiť počet</button>
 setCount(0)}>Resetovať</button>
 setCount (počet - 1)}>Znížiť počet</button>
 </div>
 </div>
 )
}

Vyššie uvedená implementácia funguje perfektne. Rovnaké výsledky však môžete dosiahnuť aj pomocou useReducer háčik.

Tento príklad má jednoducho ukázať, ako sa useReducer hák funguje. V reálnej aplikácii useReducer je pre tento scenár prehnané.

useReducer uľahčuje spracovanie súvisiacich stavov a komplexnej logiky založenej na typu prešiel v odoslaných akcie objekt.

Napríklad funkcia odoslania môže odoslať súbor akcie objekt, ktorý vyzerá asi takto:

{typu:"typ_akcie", užitočné zaťaženie:štát * 2}

Najprv importujte useReducer hák, potom definujte reduktor funkcia s parametrami: štát a deštrukturované akcie objekt.

importovať {useReducer} od"reagovať";
funkciureduktor(state, { type, payload }) {
ak (typ 'countIncrease') {
vrátiť užitočné zaťaženie;
 } inakak (typ 'countDecrease') {
vrátiť užitočné zaťaženie;
 } inakak (typ 'countReset') {
vrátiť užitočné zaťaženie;
 } inak {
vrátiť štát;
 }
}

Po definovaní reduktor funkciu, môžete zostaviť Počítadlo komponent s useReducer háčik.

funkciuPočítadlo() {
konšt [počet, odoslanie] = useReducer (reduktor, 0);
vrátiť (


 Počet je: {count}


 odoslanie ({ typu: 'countIncrease', užitočné zaťaženie: počítať + 1 })}>
 Zvýšte počet
 </button>
 odoslanie ({ typu: 'countReset', užitočné zaťaženie: 0 })}>
 Vynulovať počet
 </button>
 odoslanie ({ typu: 'countDecrease', užitočné zaťaženie: počítať - 1 })}>
 Zvýšte počet
 </button>
 </div>
 </div>
 );
}

V bloku kódu vyššie prvé tlačidlo odošle akciu typu početZvýšiť s užitočným zaťažením počítať + 1. Táto akcia je zodpovedná za zvýšenie hodnoty počtu.

Druhé tlačidlo odošle akciu typu countReset s užitočnou záťažou 0, ktorá resetuje hodnotu počítania späť na 0.

Tretie tlačidlo odošle akciu typu početZnížiť s užitočným zaťažením počítať - 1 čím sa hodnota počtu zníži o 1.

Výber medzi useState a useReducer Hooks

Teraz, keď ste pochopili, ako používať useState a useReducer háčiky, je dôležité vedieť, kedy použiť ten správny.

Ak váš stav nevyžaduje komplexnú logiku, potom samozrejme použite useReducer môže byť prehnané.

Ak je váš štát niečo iné ako Primitívy JavaScriptu, ako sú čísla, reťazce a boolovské hodnoty, mali by ste použiť useState háčik. A ak je typ stavu objekt alebo pole, mali by ste zvážiť použitie useReducer namiesto toho.

Ako vaša aplikácia rastie v zložitosti, je ťažké zvládnuť stav iba pomocou useState a useReducer háčiky.

Toto je kedy môžete použiť externé knižnice ako Redux, Jotai a Zustand. Tieto knižnice uľahčujú spracovanie zmien stavu vo viacerých komponentoch.

Uľahčenie správy štátu pomocou knižníc JavaScript

Knižnice ako React, Vue a Svelte majú všetky svoje vlastné spôsoby zaobchádzania so stavom. Samostatné zaobchádzanie so správou stavu pomocou vanilkového JavaScriptu je určite niečo, o čo sa môžete pokúsiť, ale oveľa jednoduchšie a pohodlnejšie je použiť bitkou testovanú knižnicu JavaScript.

Ak vytvárate komplexnú aplikáciu pomocou Reactu, kde potrebujete spravovať niekoľko komponentov, Redux môže byť pre vás tou najlepšou voľbou.