UseState vs. useReducer in React: teisingo būsenos valdymo kabliuko pasirinkimas

Jei norite gauti žiniatinklio kūrimo darbą, turėsite daugiau galimybių pasisekti, jei išmoksite „React JavaScript“ biblioteką. „React“ yra viena iš dažniausiai naudojamų bibliotekų pramonėje. O viena įdomiausių „React“ bibliotekos savybių yra kabliukų koncepcija.

Kabliukai yra tiesiog „JavaScript“ funkcijos, kurios išskiria ir leidžia pakartotinai naudoti logiką „React“ programoje. Valstybės valdymo srityje jums yra du pagrindiniai kabliukai – useState kabliukas ir useReducer kabliukas.

„State Hook“ naudojimo apžvalga

The useState kabliukas yra labiausiai paplitęs būdas valdyti būseną React. Toliau pateikta sintaksė iliustruoja, kaip naudoti šį kabliuką programoje:

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

Aukščiau esančiame kodo bloke valstybė kintamasis saugo duomenis atmintyje tarp atvaizdų. Ir setState yra „nustatymo“ funkcija, kuri manipuliuoja valstybė kintamasis.

The useState kabliukas grąžina masyvą su tiksliai dviem elementais. Ji taip pat įgauna pradinę būsenos kintamojo reikšmę.

Pavyzdžiui, jei norite apibrėžti būsenos kintamąjį, nurodantį vartotojo amžių, kurio pradinė vertė yra 17, tai darytumėte taip:

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

The setUserAge funkcija yra atsakinga už modifikavimą vartotojo amžius būsenos kintamasis.

setUserAge(19);

Svarbu pažymėti, kad atnaujinus būseną, suaktyvinamas komponento perteikimas, o netinkamai atnaujinus būsenos kintamąjį gali atsirasti begalinis ciklas, galintis sugadinti kodą.

React nepatartina tiesiogiai modifikuoti būsenos (kaip parodyta toliau pateiktame kodo bloke), nes nebūsenos kintamųjų pakeitimai neišlieka tarp komponentų atvaizdavimo.

vartotojo Amžius = 19;

Būsena yra vietinė ją apibrėžiančiam komponentui. Jei tuos pačius komponentus ekrane pateikiate kelis kartus, kiekvienas komponentas turės savo nepriklausomą būseną.

funkcijaProgramėlė(){
grąžinti (




 </div>
 )
}

Aukščiau esančiame kodo bloke yra du Jungiklis komponentai, bet kiekvienas komponentas tvarko savo būseną ir nepasikliauja kitu komponentu, nebent vienas komponentas dalijasi savo būsena su kitu komponentu.

„React“ tvarko būsenos atnaujinimus paketu. Tai reiškia, kad kai iškviečiate būsenos kintamojo nustatymo funkciją, būsenos kintamasis neatnaujinamas iki kito pakartotinio pateikimo.

Reducer Hook naudojimo apžvalga

„useReducer“ yra „React Hook“. tai gali būti naudinga, kai norite vienu metu tvarkyti kelias susijusias būsenas. Sintaksė skirta useReducer atrodo maždaug taip:

konst [būsena, išsiuntimas] = useReducer (reduktorius, pradinė būsena)

Palyginus su useState, in useReducer, čia yra valstybė kintamasis ir a išsiuntimas funkcija, kuri siunčia veiksmus iki reduktorius funkcija, kuri tvarko naudingus krovinius ir atnaujina valstybė.

Pavyzdžiui, tarkime, kad kuriate paprastą skaitiklio programą su mygtukais, kurie gali iš naujo nustatyti skaitiklį, padidinti skaitiklio reikšmę arba sumažinti skaitiklio reikšmę. Naudojant useState jūsų kodas atrodys maždaug taip:

funkcijaSkaitliukas(){
konst [count, setCount] = useState(0);
grąžinti(


 Skaičius yra: {count}


 setCount (skaičius + 1)}>Padidinti skaičių</button>
 setCount(0)}>Atstatyti</button>
 setCount (count - 1)}>Sumažinti skaičių</button>
 </div>
 </div>
 )
}

Aukščiau pateiktas įgyvendinimas veikia puikiai. Bet jūs taip pat galite pasiekti tuos pačius rezultatus naudodami useReducer kabliukas.

Šis pavyzdys tiesiog skirtas parodyti, kaip useReducer kabliukas veikia. Realioje programoje, useReducer yra perdėta šiam scenarijui.

useReducer leidžia lengviau valdyti susijusias būsenas ir sudėtingą logiką, pagrįstą tipo praėjo išsiųstas veiksmas objektas.

Pavyzdžiui, išsiuntimo funkcija gali išsiųsti el veiksmas objektas, kuris atrodo maždaug taip:

{tipo:"veiksmo_tipas", naudingoji apkrova:state* 2}

Pirmiausia importuokite useReducer kablys, tada apibrėžkite reduktorius funkcija su parametrais: valstybė ir sugriautos veiksmas objektas.

importuoti {useReducer} iš"reaguoti";
funkcijareduktorius(būsena, { tipas, krovinys }) {
jeigu (tipas „skaičiaus padidėjimas“) {
grąžinti naudingoji apkrova;
 } Kitasjeigu (tipas 'count Decrease') {
grąžinti naudingoji apkrova;
 } Kitasjeigu (tipas 'countReset') {
grąžinti naudingoji apkrova;
 } Kitas {
grąžinti valstybė;
 }
}

Apibrėžus reduktorius funkciją, galite sukurti Skaitliukas komponentas su useReducer kabliukas.

funkcijaSkaitliukas() {
konst [count, dispatch] = useReducer (reduktorius, 0);
grąžinti (


 Skaičius yra: {count}


 išsiuntimas({ tipo: „skaičiaus padidėjimas“, naudingoji apkrova: skaičiuoti + 1 })}>
 Padidinti skaičių
 </button>
 išsiuntimas({ tipo: 'countReset', naudingoji apkrova: 0 })}>
 Iš naujo nustatyti skaičių
 </button>
 išsiuntimas({ tipo: 'count Decrease', naudingoji apkrova: skaičiuoti - 1 })}>
 Padidinti skaičių
 </button>
 </div>
 </div>
 );
}

Aukščiau esančiame kodo bloke pirmasis mygtukas siunčia tipo veiksmą skaičius Padidinti su naudingu kroviniu skaičiuoti + 1. Šis veiksmas yra atsakingas už skaičiavimo vertės padidinimą.

Antrasis mygtukas siunčia tipo veiksmą count Reset kurių naudingoji apkrova yra 0, kuri iš naujo nustato skaičiavimo reikšmę į 0.

Trečiasis mygtukas siunčia tipo veiksmą skaičius Sumažinti su naudingu kroviniu skaičius - 1 kuris sumažina skaičiavimo reikšmę 1.

Pasirinkimas tarp useState ir useReducer Hooks

Dabar jūs suprantate, kaip naudoti useState ir useReducer kabliukus, svarbu žinoti, kada naudoti tinkamą.

Jei jūsų būsena nereikalauja sudėtingos logikos, tada, žinoma, naudokite useReducer gali būti perdėta.

Jei jūsų valstybė yra ne kas kita „JavaScript“ primityvai, tokie kaip skaičiai, eilutės ir loginės reikšmės, turėtumėte naudoti useState kabliukas. Ir jei būsenos tipas yra objektas arba masyvas, turėtumėte apsvarstyti galimybę naudoti useReducer vietoj to.

Kai jūsų programa tampa vis sudėtingesnė, tampa sunku valdyti būseną tik naudojant useState ir useReducer kabliukai.

Tai kada galite naudoti išorines bibliotekas, tokias kaip Redux, Jotai ir Zustand. Šios bibliotekos leidžia lengviau tvarkyti kelių komponentų būsenos pakeitimus.

Valstybės valdymo palengvinimas naudojant „JavaScript“ bibliotekas

Tokios bibliotekos kaip „React“, „Vue“ ir „Svelte“ turi savo būsenos tvarkymo būdus. Neabejotinai galite pabandyti savarankiškai valdyti būsenos valdymą naudojant „vanilla JavaScript“, tačiau daug lengviau ir patogiau naudoti kovoje patikrintą „JavaScript“ biblioteką.

Jei kuriate sudėtingą programą naudodami „React“, kur reikia valdyti kelis komponentus, „Redux“ gali būti geriausias pasirinkimas.