UseState vs. useReducer in React: pareizā stāvokļa pārvaldības āķa izvēle

Ja vēlaties iegūt darbu tīmekļa izstrādes jomā, jums būs lielākas izredzes gūt panākumus, ja apgūsiet React JavaScript bibliotēku. React ir viena no visvairāk izmantotajām bibliotēkām nozarē. Un viena no interesantākajām React bibliotēkas iezīmēm ir āķu koncepcija.

Āķi ir vienkārši JavaScript funkcijas, kas izolē un ļauj atkārtoti izmantot loģiku React lietojumprogrammā. Valsts pārvaldībai jums ir pieejami divi galvenie āķi — useState āķis un useReducer āķis.

Pārskats par izmantošanuState Hook

The useState āķis ir visizplatītākais veids, kā pārvaldīt statusu programmā React. Tālāk sniegtā sintakse parāda, kā lietotnē izmantot šo āķi:

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

Iepriekš esošajā koda blokā Valsts mainīgais satur datus atmiņā starp renderēšanu. Un setState ir funkcija "iestatītājs", kas manipulē ar Valsts mainīgs.

The

useState hook atgriež masīvu ar tieši diviem elementiem. Tas arī ņem sākotnējo vērtību stāvokļa mainīgajam.

Piemēram, ja vēlaties definēt stāvokļa mainīgo, kas apzīmē lietotāja vecumu ar sākotnējo vērtību 17, rīkojieties šādi:

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

The setUserAge funkcija ir atbildīga par modificēšanu lietotāja vecums stāvokļa mainīgais.

setUserAge(19);

Ir svarīgi atzīmēt, ka stāvokļa atjaunināšana, komponenta atkārtota atveidošana un stāvokļa mainīgā nepareiza atjaunināšana var izraisīt bezgalīgu cilpu, kas var sabojāt jūsu kodu.

Programmā React nav ieteicams tieši modificēt stāvokli (kā parādīts zemāk esošajā koda blokā), jo izmaiņas nestāvokļa mainīgajos starp komponentu renderēšanu nepastāv.

lietotāja Vecums = 19;

Stāvoklis ir lokāls komponentam, kas to definē. Ja ekrānā vairākas reizes tiek atveidoti tie paši komponenti, katram komponentam būs savs neatkarīgs stāvoklis.

funkcijuApp(){
atgriezties (




 </div>
 )
}

Iepriekš esošajā koda blokā ir divi Slēdzis komponenti, bet katrs komponents apstrādā savu stāvokli un nepaļaujas uz otru komponentu, ja vien viens komponents nekopj savu stāvokli ar otru komponentu.

React apstrādā stāvokļa atjauninājumus, pakejot. Tas nozīmē, ka, izsaucot stāvokļa mainīgā iestatītāja funkciju, stāvokļa mainīgais netiek atjaunināts līdz nākamajai atkārtotai renderēšanai.

Reducer Hook lietošanas pārskats

useReducer ir React āķis kas var noderēt ikreiz, kad vēlaties vienlaikus apstrādāt vairākus saistītos stāvokļus. Sintakse priekš useReducer izskatās apmēram šādi:

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

Salīdzinot ar useState, iekšā useReducer, tur ir Valsts mainīgais un a nosūtīšana funkcija, kas nosūta darbības līdz reduktors funkcija, kas apstrādā lietderīgās kravas un atjaunina Valsts.

Piemēram, pieņemsim, ka veidojat vienkāršu skaitītāja lietojumprogrammu ar pogām, kas var atiestatīt skaitītāju, palielināt skaitītāja vērtību vai samazināt skaitītāja vērtību. Izmantojot useState jūsu kods izskatīsies apmēram šādi:

funkcijuSkaitītājs(){
konst [count, setCount] = useState(0);
atgriezties(


 Skaits ir: {count}


 setCount (skaits + 1)}>Palielināt skaitu</button>
 setCount(0)}>Atiestatīt</button>
 setCount (skaits - 1)}>Samazināt skaitu</button>
 </div>
 </div>
 )
}

Iepriekš minētā ieviešana darbojas nevainojami. Bet tos pašus rezultātus var sasniegt arī ar useReducer āķis.

Šis piemērs ir vienkārši paredzēts, lai parādītu, kā useReducer āķis darbojas. Reālās pasaules lietojumprogrammā useReducer ir pārspīlēts šim scenārijam.

useReducer atvieglo saistīto stāvokļu un sarežģītās loģikas apstrādi, pamatojoties uz veids nodots nosūtītajā darbība objektu.

Piemēram, nosūtīšanas funkcija varētu nosūtīt darbība objekts, kas izskatās apmēram šādi:

{veids:"darbības_veids", kravnesība:Valsts * 2}

Vispirms importējiet useReducer āķis, pēc tam definējiet reduktors funkcija ar parametriem: Valsts un iznīcinātie darbība objektu.

imports {useReducer} no"reaģēt";
funkcijureduktors(stāvoklis, { veids, kravnesība }) {
ja (tips 'count Increase') {
atgriezties lietderīgā krava;
 } citsja (tips "skaita samazinājums") {
atgriezties lietderīgā krava;
 } citsja (tips 'countReset') {
atgriezties lietderīgā krava;
 } cits {
atgriezties Valsts;
 }
}

Pēc definēšanas reduktors funkciju, varat izveidot Skaitītājs komponents ar useReducer āķis.

funkcijuSkaitītājs() {
konst [count, dispatch] = useReducer (reducer, 0);
atgriezties (


 Skaits ir: {count}


 nosūtīšana({ veids: 'count Increase', kravnesība: skaits + 1 })}>
 Palielināt skaitu
 </button>
 nosūtīšana({ veids: 'countReset', kravnesība: 0 })}>
 Atiestatīt skaitu
 </button>
 nosūtīšana({ veids: "skaita samazinājums", kravnesība: skaitīt - 1 })}>
 Palielināt skaitu
 </button>
 </div>
 </div>
 );
}

Iepriekš esošajā koda blokā pirmā poga nosūta veida darbību skaitsPalielināt ar kravnesību skaits + 1. Šī darbība ir atbildīga par skaitīšanas vērtības palielināšanu.

Otrā poga nosūta veida darbību countReset ar lietderīgo slodzi 0, kas atiestata skaitīšanas vērtību uz 0.

Trešā poga nosūta veida darbību skaitsSamazināt ar kravnesību skaits - 1 kas samazina skaitīšanas vērtību par 1.

Izvēle starp useState un useReducer Hooks

Tagad jūs saprotat, kā lietot useState un useReducer āķi, ir svarīgi zināt, kad izmantot pareizo.

Ja jūsu valsts neprasa sarežģītu loģiku, tad acīmredzot izmantojot useReducer var būt pārspīlēts.

Ja jūsu valsts ir kaut kas cits JavaScript primitīvi, piemēram, skaitļi, virknes un Būla vērtības, jums vajadzētu izmantot useState āķis. Un, ja stāvokļa veids ir objekts vai masīvs, jums vajadzētu apsvērt iespēju to izmantot useReducer vietā.

Tā kā jūsu lietojumprogramma kļūst arvien sarežģītāka, kļūst grūti pārvaldīt stāvokli tikai ar useState un useReducer āķi.

Tas ir tad, kad varat izmantot ārējās bibliotēkas, piemēram, Redux, Jotai un Zustands. Šīs bibliotēkas atvieglo stāvokļa izmaiņu apstrādi vairākos komponentos.

Valsts pārvaldības atvieglošana, izmantojot JavaScript bibliotēkas

Bibliotēkām, piemēram, React, Vue un Svelte, ir savi veidi, kā rīkoties ar stāvokli. Noteikti varat mēģināt patstāvīgi pārvaldīt valsts pārvaldību, izmantojot vaniļas JavaScript, taču daudz vienkāršāk un ērtāk ir izmantot kaujās pārbaudītu JavaScript bibliotēku.

Ja veidojat sarežģītu lietojumprogrammu, izmantojot React, kurā jums jāpārvalda vairāki komponenti, Redux varētu būt jums labākā izvēle.