UseState vs. useReducer u Reactu: odabir prave kuke za upravljanje stanjem

Ako želite dobiti posao web razvoja, imali biste veće šanse za uspjeh ako naučite React JavaScript biblioteku. React je jedna od najčešće korištenih knjižnica u industriji. A jedna od najzanimljivijih značajki React biblioteke je koncept udica.

Hookovi su jednostavno JavaScript funkcije koje izoliraju i omogućuju vam ponovnu upotrebu logike u React aplikaciji. Za upravljanje državom dostupne su vam dvije glavne udice — useState kuka i useReducer kuka.

Pregled useState kuke

The useState hook je najčešći način rukovanja stanjem u Reactu. Sintaksa u nastavku ilustrira kako koristiti ovu kuku u svojoj aplikaciji:

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

U gornjem bloku koda, država varijabla čuva podatke u memoriji između renderiranja. I setState je "setter" funkcija koja manipulira država varijabla.

The useState hook vraća niz s točno dva elementa. Također uzima početnu vrijednost za varijablu stanja.

Na primjer, ako želite definirati varijablu stanja koja predstavlja dob korisnika, s početnom vrijednošću od 17, to ćete učiniti na sljedeći način:

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

The setUserAge funkcija je odgovorna za modificiranje userAge varijabla stanja.

setUserAge(19);

Važno je napomenuti da ažuriranje stanja pokreće ponovno renderiranje komponente, a neispravno ažuriranje varijable stanja može rezultirati beskonačnom petljom koja može pokvariti vaš kod.

U Reactu nije preporučljivo izravno mijenjati stanje (kao što je prikazano u bloku koda u nastavku), jer promjene varijabli koje nisu u stanju ne traju između renderiranja komponente.

korisnička dob = 19;

Stanje je lokalno za komponentu koja ga definira. Ako imate iste komponente prikazane na ekranu više puta, svaka će komponenta imati svoje neovisno stanje.

funkcijaaplikacija(){
povratak (




 </div>
 )
}

U gornjem bloku koda postoje dva Sklopka komponente, ali svaka komponenta upravlja svojim stanjem i ne oslanja se na drugu komponentu osim ako jedna komponenta ne dijeli svoje stanje s drugom komponentom.

React obrađuje ažuriranja stanja grupno. To znači da kada pozovete funkciju postavljača varijable stanja, varijabla stanja se ne ažurira do sljedećeg ponovnog prikaza.

Pregled useReducer kuke

useReducer je React kuka to može dobro doći kad god želite istovremeno obraditi više povezanih stanja. Sintaksa za useReducer izgleda otprilike ovako:

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

U usporedbi sa useState, u useReducer, tamo je država varijabla i a otprema funkcija koja šalje akcije do reduktor funkcija koja obrađuje korisni teret i ažurira država.

Na primjer, recimo da gradite jednostavnu aplikaciju brojača s gumbima koji mogu resetirati brojač, povećati vrijednost brojača ili smanjiti vrijednost brojača. Korištenje useState vaš kod će izgledati otprilike ovako:

funkcijaBrojač(){
konst [count, setCount] = useState(0);
povratak(


 Broj je: {count}


 setCount (broj + 1)}>Povećaj broj</button>
 setCount(0)}>Poništi</button>
 setCount (count - 1)}>Smanji broj</button>
 </div>
 </div>
 )
}

Gornja implementacija radi savršeno. Ali iste rezultate možete postići i uz pomoć useReducer kuka.

Ovaj primjer jednostavno treba pokazati kako useReducer udica radi. U aplikaciji iz stvarnog svijeta, useReducer je pretjerano za ovaj scenarij.

useReducer olakšava rukovanje povezanim stanjima i složenom logikom temeljenom na tip prošao u otpremljenom akcijski objekt.

Na primjer, funkcija otpreme može poslati akcijski objekt koji izgleda otprilike ovako:

{tip:"vrsta_radnje", nosivost:država * 2}

Prvo uvezite useReducer kuka, a zatim definirajte reduktor funkcija s parametrima: država i destrukturiranog akcijski objekt.

uvoz {useReducer} iz"reagirati";
funkcijareduktor(stanje, { vrsta, nosivost }) {
ako (tip 'countIncrease') {
povratak nosivost;
 } drugoako (tip 'countDecrease') {
povratak nosivost;
 } drugoako (tip 'countReset') {
povratak nosivost;
 } drugo {
povratak država;
 }
}

Nakon definiranja reduktor funkciju, možete izgraditi Brojač komponenta s useReducer kuka.

funkcijaBrojač() {
konst [count, dispatch] = useReducer (reduktor, 0);
povratak (


 Broj je: {count}


 otprema ({ tip: 'countIncrease', nosivost: brojati + 1 })}>
 Povećaj broj
 </button>
 otprema ({ tip: 'countReset', nosivost: 0 })}>
 Poništi brojač
 </button>
 otprema ({ tip: 'countDecrease', nosivost: brojati - 1 })}>
 Povećaj broj
 </button>
 </div>
 </div>
 );
}

U gornjem bloku koda, prvi gumb šalje radnju vrste brojati Povećati s nosivošću od brojati + 1. Ova radnja je odgovorna za povećanje vrijednosti brojanja.

Drugi gumb šalje radnju vrste countReset s korisnim opterećenjem od 0 što vraća vrijednost brojanja na 0.

Treći gumb šalje radnju tipa brojatiSmanjiti s nosivošću od brojati - 1 što smanjuje vrijednost brojanja za 1.

Odabir između kukica useState i useReducer

Sada, kada razumijete kako se koristi useState i useReducer udice, važno je znati kada koristiti pravu.

Ako vaše stanje ne zahtijeva složenu logiku, onda očito koristite useReducer može biti pretjerano.

Ako je vaša država išta drugo osim JavaScript primitive kao što su brojevi, nizovi i Booleove vrijednosti, trebali biste koristiti useState kuka. A ako je tip stanja objekt ili niz, trebali biste razmisliti o korištenju useReducer umjesto toga.

Kako vaša aplikacija postaje sve složenija, postaje teško rukovati stanjem samo s useState i useReducer udice.

Ovo je kada možete koristiti vanjske biblioteke poput Reduxa, Jotai i Zustand. Ove biblioteke olakšavaju rukovanje promjenama stanja u više komponenti.

Olakšavanje upravljanja stanjem s JavaScript bibliotekama

Sve biblioteke kao što su React, Vue i Svelte imaju svoje načine rukovanja stanjem. Samostalno rukovanje upravljanjem stanjem pomoću vanilla JavaScripta definitivno je nešto što možete pokušati, ali mnogo je lakše i praktičnije koristiti JavaScript biblioteku testiranu u bitkama.

Ako gradite složenu aplikaciju koristeći React gdje trebate upravljati s nekoliko komponenti, Redux bi mogao biti najbolji izbor za vas.