UseState vs. useReducer in React: A megfelelő állapotkezelési horog kiválasztása

Ha webfejlesztő munkát szeretne elhelyezni, nagyobb esélye van a sikerre, ha megtanulja a React JavaScript könyvtárat. A React az egyik leggyakrabban használt könyvtár az iparágban. A React könyvtár egyik legérdekesebb jellemzője pedig a horgok koncepciója.

A horgok egyszerűen JavaScript-függvények, amelyek elkülönítik és lehetővé teszik a logika újrafelhasználását egy React alkalmazásban. Az államigazgatáshoz két fő horog áll az Ön rendelkezésére: a useState horog és a useReducer horog.

A useState Hook áttekintése

A useState hook a React állapotkezelésének legáltalánosabb módja. Az alábbi szintaxis bemutatja, hogyan kell használni ezt a horgot az alkalmazásban:

const [állapot, setState] = useState (initialStateValue);

A fenti kódblokkban a állapot változó adatokat tárol a memóriában a renderelések között. És setState a "beállító" funkció, amely manipulálja a állapot változó.

A useState hook pontosan két elemű tömböt ad vissza. Az állapotváltozó kezdeti értékét is felveszi.

Például, ha egy állapotváltozót szeretne definiálni, amely a felhasználó életkorát jelzi 17-es kezdeti értékkel, akkor ezt a következőképpen kell megtennie:

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

A setUserAge funkció felelős a módosításáért userAge állapotváltozó.

setUserAge(19);

Fontos megjegyezni, hogy az állapot frissítése, a komponens újrarenderelése, az állapotváltozó helytelen frissítése pedig végtelen ciklust eredményezhet, amely megszakíthatja a kódot.

A Reactban nem tanácsos közvetlenül módosítani az állapotot (ahogy az alábbi kódblokkban látható), mert a nem állapotváltozók változásai nem maradnak fenn a komponensek megjelenítése között.

felhasználói életkor = 19;

Az állapot az azt meghatározó összetevőhöz képest lokális. Ha ugyanazokat az összetevőket többször is megjeleníti a képernyőn, akkor mindegyik összetevőnek saját független állapota lesz.

funkcióApp(){
Visszatérés (




 </div>
 )
}

A fenti kódblokkban kettő van Kapcsoló komponensek, de mindegyik komponens kezeli a saját állapotát, és nem támaszkodik a másik összetevőre, kivéve, ha az egyik összetevő megosztja az állapotát a másik összetevővel.

A React kötegeléssel kezeli az állapotfrissítéseket. Ez azt jelenti, hogy amikor meghívja egy állapotváltozó beállító függvényét, az állapotváltozó nem frissül a következő újrarenderelésig.

A Reducer Hook használatának áttekintése

A useReducer egy React hook Ez akkor lehet hasznos, ha egyszerre több kapcsolódó állapotot szeretne kezelni. A szintaxis a számára useReducer valahogy így néz ki:

const [állapot, feladás] = useReducer (reduktor, kezdeti állapot)

Összehasonlítva useState, ban ben useReducer, van egy állapot változó és a Elküldés funkció, amely műveleteket küld a csökkentő funkció, amely kezeli a hasznos terheket és frissíti a állapot.

Tegyük fel például, hogy egy egyszerű számlálóalkalmazást készít olyan gombokkal, amelyek visszaállíthatják a számlálót, növelhetik vagy csökkenthetik a számláló értékét. Használata useState a kódod valahogy így fog kinézni:

funkcióSzámláló(){
const [count, setCount] = useState(0);
Visszatérés(


 A szám: {count}


 setCount (count + 1)}>Növelje a számot</button>
 setCount(0)}>Visszaállítás</button>
 setCount (count - 1)}>Csökkentse a számot</button>
 </div>
 </div>
 )
}

A fenti megvalósítás tökéletesen működik. De ugyanazt az eredményt is elérheti a segítségével a useReducer horog.

Ez a példa egyszerűen azt hivatott bemutatni, hogyan a useReducer horog működik. Egy valós alkalmazásban useReducer túlzás ehhez a forgatókönyvhöz.

useReducer megkönnyíti a kapcsolódó állapotok és komplex logika kezelését az alapján típus átadta a feladott akció tárgy.

Például a diszpécser funkció küldhet egy akció objektum, ami valahogy így néz ki:

{típus:"akciótípus", hasznos teher:állapot * 2}

Először importálja a useReducer horog, majd határozza meg a csökkentő függvény a következő paraméterekkel: állapot és a megsemmisült akció tárgy.

import {useReducer} tól től"reagál";
funkciócsökkentő(állapot, { típus, rakomány }) {
ha (típus 'count Increase') {
Visszatérés hasznos teher;
 } másha (típus 'countDecrease') {
Visszatérés hasznos teher;
 } másha (típus 'countReset') {
Visszatérés hasznos teher;
 } más {
Visszatérés állapot;
 }
}

Miután meghatározta a csökkentő funkciót, megépítheti a Számláló komponens a useReducer horog.

funkcióSzámláló() {
const [count, dispatch] = useReducer (reducer, 0);
Visszatérés (


 A szám: {count}


 Elküldés({ típus: 'count Increase', hasznos teher: számol + 1 })}>
 Szám növelése
 </button>
 Elküldés({ típus: 'countReset', hasznos teher: 0 })}>
 Számláló visszaállítása
 </button>
 Elküldés({ típus: 'countDecrease', hasznos teher: számol - 1 })}>
 Szám növelése
 </button>
 </div>
 </div>
 );
}

A fenti kódblokkban az első gomb egy típusú műveletet küld countNövekedés hasznos teherrel szám + 1. Ez a művelet felelős a számláló értékének növeléséért.

A második gomb egy típusú műveletet küld countReset 0 hasznos teherrel, amely visszaállítja a számláló értéket 0-ra.

A harmadik gomb egy típusú műveletet küld countCsökken hasznos teherrel szám - 1 ami 1-gyel csökkenti a számlálási értéket.

Választás a useState és a useReducer Hooks között

Most, hogy megértette, hogyan kell használni useState és useReducer horgokat, fontos tudni, hogy mikor kell a megfelelőt használni.

Ha az Ön állapota nem igényel bonyolult logikát, akkor nyilvánvalóan használja useReducer túlzás lehet.

Ha az Ön állama nem más JavaScript primitívek, például számok, karakterláncok és logikai értékek, használja a useState horog. És ha az állapot típusa egy objektum vagy egy tömb, akkor érdemes megfontolni a használatát useReducer helyette.

Ahogy az alkalmazás egyre összetettebbé válik, nehézzé válik az állapot kezelése csak a useState és useReducer horgok.

Ez az, amikor használhat külső könyvtárakat, például a Reduxot, Jotai és Zustand. Ezek a könyvtárak megkönnyítik a több összetevő állapotváltozásainak kezelését.

Az állapotkezelés megkönnyítése JavaScript-könyvtárak segítségével

Az olyan könyvtáraknak, mint a React, a Vue és a Svelte, mindegyiknek megvan a maga módja az állapotkezelésnek. Az állapotkezelés önálló kezelése vanília JavaScript-szel mindenképpen megkísérelhető, de sokkal egyszerűbb és kényelmesebb a harcban tesztelt JavaScript-könyvtár használata.

Ha egy összetett alkalmazást épít a React segítségével, ahol több összetevőt kell kezelnie, a Redux lehet a legjobb választás az Ön számára.