UseState vs. useReducer v Reactu: izbira pravega kljuka za upravljanje stanja

Če želite dobiti službo spletnega razvijalca, bi imeli boljše možnosti za uspeh, če se naučite knjižnice React JavaScript. React je ena najpogosteje uporabljanih knjižnic v industriji. In ena najzanimivejših lastnosti knjižnice React je koncept kavljev.

Kavlji so preprosto funkcije JavaScript, ki izolirajo in vam omogočajo ponovno uporabo logike v aplikaciji React. Za upravljanje stanja sta vam na voljo dve glavni kljuki – useState kavelj in useReducer kavelj.

Pregled useState Hook

The useState hook je najpogostejši način za obravnavanje stanja v Reactu. Spodnja sintaksa ponazarja, kako uporabiti ta kavelj v svoji aplikaciji:

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

V zgornjem bloku kode je država spremenljivka hrani podatke v pomnilniku med upodabljanji. in setState je funkcija "setter", ki manipulira z država spremenljivka.

The useState

hook vrne matriko s točno dvema elementoma. Prav tako vzame začetno vrednost za spremenljivko stanja.

Na primer, če želite definirati spremenljivko stanja, ki predstavlja starost uporabnika, z začetno vrednostjo 17, bi to storili takole:

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

The setUserAge funkcija je odgovorna za spreminjanje userAge spremenljivka stanja.

setUserAge(19);

Pomembno je vedeti, da posodabljanje stanja sproži vnovično upodabljanje komponente, nepravilno posodabljanje spremenljivke stanja pa lahko povzroči neskončno zanko, ki lahko prekine vašo kodo.

V Reactu ni priporočljivo spreminjati stanja neposredno (kot je prikazano v bloku kode spodaj), ker spremembe spremenljivk, ki niso stanje, ne ostanejo med upodobitvami komponent.

starost uporabnika = 19;

Stanje je lokalno glede na komponento, ki ga določa. Če imate iste komponente večkrat upodobljene na zaslonu, bo imela vsaka komponenta svoje neodvisno stanje.

funkcijoaplikacija(){
vrnitev (




 </div>
 )
}

V zgornjem kodnem bloku sta dva Stikalo komponente, vendar vsaka komponenta obravnava svoje stanje in se ne zanaša na drugo komponento, razen če ena komponenta deli svoje stanje z drugo komponento.

React obravnava posodobitve stanja s paketnim združevanjem. To pomeni, da ko pokličete funkcijo nastavitve spremenljivke stanja, se spremenljivka stanja ne posodobi do naslednjega ponovnega upodabljanja.

Pregled useReducer Hooka

useReducer je kavelj React ki vam lahko pride prav, kadar koli želite obravnavati več povezanih stanj hkrati. Sintaksa za useReducer izgleda nekako takole:

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

V primerjavi s useState, v useReducer, obstaja a država spremenljivka in a odprema funkcijo, ki pošilja dejanja do reduktor funkcijo, ki obravnava koristne obremenitve in posodablja država.

Na primer, recimo, da gradite preprosto aplikacijo števca z gumbi, ki lahko ponastavijo števec, povečajo vrednost števca ali zmanjšajo vrednost števca. Uporaba useState vaša koda bo videti nekako takole:

funkcijoštevec(){
konst [count, setCount] = useState(0);
vrnitev(


 Število je: {count}


 setCount (štetje + 1)}>Povečaj število</button>
 setCount(0)}>Ponastavi</button>
 setCount (štetje - 1)}>Zmanjšaj število</button>
 </div>
 </div>
 )
}

Zgornja izvedba deluje odlično. Toda enake rezultate lahko dosežete tudi s pomočjo useReducer kavelj.

Ta primer je preprosto namenjen prikazu, kako useReducer kavelj deluje. V realni aplikaciji, useReducer je pretirano za ta scenarij.

useReducer olajša obravnavo povezanih stanj in kompleksne logike, ki temelji na vrsta opravil v odposlanem ukrepanje predmet.

Na primer, dispečerska funkcija bi lahko poslala ukrepanje predmet, ki izgleda nekako takole:

{vrsta:"vrsta_dejanja", tovor:država * 2}

Najprej uvozite useReducer kavelj, nato definirajte reduktor funkcija s parametri: država in uničeno ukrepanje predmet.

uvoz {useReducer} od"reagirati";
funkcijoreduktor(stanje, { vrsta, tovor }) {
če (tip 'countIncrease') {
vrnitev tovor;
 } drugačeče (tip 'countDecrease') {
vrnitev tovor;
 } drugačeče (tip 'countReset') {
vrnitev tovor;
 } drugače {
vrnitev država;
 }
}

Po opredelitvi reduktor funkcijo, lahko zgradite števec komponento z useReducer kavelj.

funkcijoštevec() {
konst [count, dispatch] = useReducer (reduktor, 0);
vrnitev (


 Število je: {count}


 odprema({ vrsta: 'countIncrease', tovor: štetje + 1 })}>
 Povečaj število
 </button>
 odprema({ vrsta: 'countReset', tovor: 0 })}>
 Ponastavi štetje
 </button>
 odprema({ vrsta: 'countDecrease', tovor: štetje - 1 })}>
 Povečaj število
 </button>
 </div>
 </div>
 );
}

V zgornjem kodnem bloku prvi gumb odpošlje dejanje vrste štetje Povečaj z nosilnostjo štej + 1. To dejanje je odgovorno za povečanje vrednosti števca.

Drugi gumb odpošlje dejanje vrste countReset s koristno obremenitvijo 0, ki ponastavi vrednost števca nazaj na 0.

Tretji gumb odpošlje dejanje vrste countDecrease z nosilnostjo štetje - 1 kar zmanjša vrednost števca za 1.

Izbira med kavlji useState in useReducer

Zdaj, ko razumete, kako uporabljati useState in useReducer kljuke, je pomembno vedeti, kdaj uporabiti pravega.

Če vaše stanje ne zahteva zapletene logike, potem očitno z uporabo useReducer je lahko pretirano.

Če je vaše stanje vse prej kot Primitive JavaScript, kot so števila, nizi in logične vrednosti, bi morali uporabiti useState kavelj. In če je vrsta stanja objekt ali niz, potem razmislite o uporabi useReducer namesto tega.

Ko vaša aplikacija postaja kompleksnejša, postane težko obravnavati stanje samo z useState in useReducer kavlji.

To je takrat lahko uporabite zunanje knjižnice, kot je Redux, Jotai in Zustand. Te knjižnice olajšajo obravnavanje sprememb stanja v več komponentah.

Poenostavitev upravljanja stanja s knjižnicami JavaScript

Knjižnice, kot so React, Vue in Svelte, imajo vse svoje načine ravnanja s stanjem. Samostojno upravljanje stanja z izrednim JavaScriptom je vsekakor nekaj, kar lahko poskusite, vendar je veliko lažje in bolj priročno uporabljati v bitkah preizkušeno knjižnico JavaScript.

Če gradite kompleksno aplikacijo z uporabo Reacta, kjer morate upravljati več komponent, je Redux morda najboljša izbira za vas.