UseState vs. useReducer in React: õige olekuhalduskonksu valimine

Kui soovite saada veebiarenduse töökoha, on teil suurem võimalus edu saavutamiseks, kui õpite React JavaScripti teeki. React on üks enim kasutatavaid raamatukogusid selles valdkonnas. Ja üks Reacti raamatukogu huvitavamaid omadusi on konksude kontseptsioon.

Konksud on lihtsalt JavaScripti funktsioonid, mis eraldavad ja võimaldavad teil Reacti rakenduses loogikat uuesti kasutada. Riigihalduse jaoks on teile saadaval kaks peamist konksu – useState konks ja useReducer konks.

State Hooki kasutamise ülevaade

The useState konks on kõige levinum viis oleku käsitlemiseks Reactis. Allolev süntaks illustreerib, kuidas seda konksu oma rakenduses kasutada:

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

Ülaltoodud koodiplokis on olek muutuja hoiab andmeid mälus renderduste vahel. Ja setState on "seadja" funktsioon, mis manipuleerib olek muutuv.

The

useState hook tagastab massiivi täpselt kahe elemendiga. Samuti võtab see olekumuutuja algväärtuse.

Näiteks kui soovite määratleda olekumuutuja, mis esindab kasutaja vanust algväärtusega 17, teete seda järgmiselt.

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

The setUserAge funktsioon vastutab selle muutmise eest kasutaja vanus oleku muutuja.

setUserAge(19);

Oluline on märkida, et oleku värskendamine, komponendi ümberkujundamise käivitamine ja olekumuutuja ebaõige värskendamine võib põhjustada lõpmatu tsükli, mis võib teie koodi murda.

Reactis ei ole soovitav olekut otse muuta (nagu on näidatud allolevas koodiplokis), kuna olekuväliste muutujate muudatused ei püsi komponentide renderdamiste vahel.

kasutaja Vanus = 19;

Olek on lokaalne selle komponendi suhtes, mis seda määratleb. Kui teil on samad komponendid ekraanil mitu korda renderdatud, on igal komponendil oma sõltumatu olek.

funktsiooniRakendus(){
tagasi (




 </div>
 )
}

Ülaltoodud koodiplokis on kaks Lüliti komponendid, kuid iga komponent käsitleb oma olekut ega tugine teisele komponendile, välja arvatud juhul, kui üks komponent jagab oma olekut teise komponendiga.

React käsitleb olekuvärskendusi pakkimise teel. See tähendab, et kui kutsute olekumuutuja seadistusfunktsiooni, ei värskendata olekumuutujat enne järgmist renderdamist.

Reducer Hooki kasutamise ülevaade

useReducer on Reacti konks mis võib olla kasulik alati, kui soovite korraga käsitleda mitut seotud olekut. Süntaks jaoks useReducer näeb välja umbes selline:

konst [olek, lähetamine] = useReducer (reduktor, esialgne olek)

Võrreldes useState, sisse useReducer, Siin on olek muutuv ja a lähetamine funktsioon, mis saadab toimingud kuni reduktor funktsioon, mis käsitleb kasulikke koormusi ja värskendab olek.

Oletame näiteks, et loote lihtsa loenduri rakenduse nuppudega, mis saavad loenduri lähtestada, loenduri väärtust suurendada või loenduri väärtust vähendada. Kasutades useState teie kood näeb välja umbes selline:

funktsiooniLoendur(){
konst [count, setCount] = useState(0);
tagasi(


 Arv on: {count}


 setCount (count + 1)}>Suurendage arvu</button>
 setCount(0)}>Lähtesta</button>
 setCount (count - 1)}>Vähenda arvu</button>
 </div>
 </div>
 )
}

Ülaltoodud teostus töötab suurepäraselt. Kuid samu tulemusi saate saavutada ka abiga useReducer konks.

Selle näite eesmärk on lihtsalt näidata, kuidas useReducer konks töötab. Pärismaailma rakenduses useReducer on selle stsenaariumi jaoks liialdatud.

useReducer muudab seotud olekute ja keeruka loogika käsitlemise lihtsamaks tüüp lähetatud tegevust objektiks.

Näiteks võib väljasaatmisfunktsioon saata an tegevust objekt, mis näeb välja umbes selline:

{tüüp:"tegevuse_tüüp", kasulik koormus:osariik * 2}

Esmalt importige useReducer konks, seejärel määratlege reduktor funktsioon parameetritega: olek ja hävitatud tegevust objektiks.

importida {useReducer} alates"reageerida";
funktsioonireduktor(olek, { tüüp, kasulik koormus }) {
kui (tüüp 'count Increase') {
tagasi kasulik koormus;
 } muidukui (tüüp 'countDecrease') {
tagasi kasulik koormus;
 } muidukui (tüüp "count Reset") {
tagasi kasulik koormus;
 } muidu {
tagasi riik;
 }
}

Pärast määratlemist reduktor funktsiooni, saate luua Loendur komponent koos useReducer konks.

funktsiooniLoendur() {
konst [count, dispatch] = useReducer (reduktor, 0);
tagasi (


 Arv on: {count}


 saatmine({ tüüp: 'count Increase', kasulik koormus: loe + 1 })}>
 Suurendage arvu
 </button>
 saatmine({ tüüp: "count Reset", kasulik koormus: 0 })}>
 Lähtestage loendus
 </button>
 saatmine({ tüüp: 'countDecrease', kasulik koormus: loe - 1 })}>
 Suurendage arvu
 </button>
 </div>
 </div>
 );
}

Ülaltoodud koodiplokis edastab esimene nupp tüüpi toimingu count Suurendada kandevõimega arv + 1. See toiming vastutab loendusväärtuse suurendamise eest.

Teine nupp edastab teatud tüüpi toimingu countReset kasuliku koormusega 0, mis lähtestab loendusväärtuse tagasi 0-le.

Kolmas nupp edastab teatud tüüpi toimingu count Vähenda kandevõimega arv - 1 mis vähendab loendusväärtust 1 võrra.

UseState ja useReducer Hooks vahel valimine

Nüüd saate aru, kuidas seda kasutada useState ja useReducer konksud, on oluline teada, millal õiget kasutada.

Kui teie olek ei nõua keerulist loogikat, siis ilmselt kasutades useReducer võib olla liialdatud.

Kui teie riik on midagi muud kui JavaScripti primitiivid, nagu numbrid, stringid ja tõeväärtused, peaksite kasutama useState konks. Ja kui oleku tüüp on objekt või massiiv, peaksite kaaluma selle kasutamist useReducer selle asemel.

Kuna teie rakendus muutub keerukamaks, muutub oleku käsitlemine ainult rakendusega keeruliseks useState ja useReducer konksud.

See on siis, kui saate kasutada väliseid teeke, nagu Redux, Jotai ja Zustand. Need teegid muudavad mitme komponendi olekumuutuste käsitlemise lihtsamaks.

Riigihalduse muutmine JavaScripti teekide abil lihtsamaks

Teekidel, nagu React, Vue ja Svelte, on oleku käsitlemiseks oma viisid. Omaette olekuhalduse haldamine vanilje JavaScriptiga on kindlasti midagi, mida võite proovida, kuid lahingutestitud JavaScripti teeki on palju lihtsam ja mugavam kasutada.

Kui loote Reacti abil keerukat rakendust, kus peate haldama mitut komponenti, võib Redux olla teie jaoks parim valik.