UseState vs. useReducer v React: Výběr správného háčku řízení stavu

Pokud se chcete věnovat vývoji webu, měli byste větší šanci uspět, pokud se naučíte knihovnu React JavaScript. React je jednou z nejpoužívanějších knihoven v oboru. A jednou z nejzajímavějších funkcí knihovny React je koncept háčků.

Háky jsou jednoduše funkce JavaScriptu, které izolují a umožňují opětovné použití logiky v aplikaci React. Pro správu státu máte k dispozici dva hlavní háčky – useState hák a useReducer háček.

Přehled použitíState Hook

The useState hook je nejběžnějším způsobem zpracování stavu v Reactu. Níže uvedená syntaxe ukazuje, jak používat tento háček ve vaší aplikaci:

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

Ve výše uvedeném bloku kódu je Stát proměnná uchovává data v paměti mezi rendery. A setState je funkce "setter", která manipuluje s Stát variabilní.

The useState hook vrátí pole s přesně dvěma prvky. Také přebírá počáteční hodnotu stavové proměnné.

Chcete-li například definovat stavovou proměnnou, která představuje věk uživatele, s počáteční hodnotou 17, postupujte takto:

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

The setUserAge funkce je zodpovědná za úpravu uživatelský věk stavová proměnná.

setUserAge(19);

Je důležité poznamenat, že aktualizace stavu, spouští vykreslování komponenty a nesprávná aktualizace stavové proměnné může vést k nekonečné smyčce, která může přerušit váš kód.

V Reactu není vhodné upravovat stav přímo (jak je ukázáno v bloku kódu níže), protože změny nestavových proměnných mezi vykreslením komponent nepřetrvají.

userAge = 19;

Stav je lokální pro komponentu, která jej definuje. Pokud máte stejné komponenty vykreslené na obrazovce vícekrát, každá komponenta bude mít svůj vlastní nezávislý stav.

funkceAplikace(){
vrátit se (




 </div>
 )
}

V bloku kódu výše jsou dva Přepínač komponenty, ale každá komponenta zpracovává svůj vlastní stav a nespoléhá se na druhou komponentu, pokud jedna komponenta nesdílí svůj stav s druhou komponentou.

React zpracovává aktualizace stavu pomocí dávek. To znamená, že když zavoláte funkci setter stavové proměnné, stavová proměnná se aktualizuje až při dalším opětovném vykreslení.

Přehled použitíReducer Hook

useReducer je háček React to se může hodit, kdykoli chcete zvládnout více souvisejících stavů současně. Syntaxe pro useReducer vypadá nějak takto:

konst [stav, odeslání] = useReducer (reduktor, initialState)

Ve srovnání s useState, v useReducer, tady je Stát proměnná a a odeslání funkce, která odesílá akce až do reduktor funkce, která zpracovává užitečné zatížení a aktualizuje Stát.

Řekněme například, že vytváříte jednoduchou aplikaci čítače s tlačítky, která mohou čítač vynulovat, zvýšit hodnotu čítače nebo snížit hodnotu čítače. Použitím useState váš kód bude vypadat nějak takto:

funkceČelit(){
konst [count, setCount] = useState(0);
vrátit se(


 Počet je: {count}


 setCount (počet + 1)}>Zvýšit počet</button>
 setCount(0)}>Resetovat</button>
 setCount (počet - 1)}>Snížit počet</button>
 </div>
 </div>
 )
}

Výše uvedená implementace funguje perfektně. Stejných výsledků ale můžete dosáhnout také pomocí useReducer háček.

Tento příklad má jednoduše demonstrovat, jak useReducer hák funguje. V reálné aplikaci, useReducer je pro tento scénář přehnané.

useReducer usnadňuje zpracování souvisejících stavů a ​​složité logiky založené na typ prošel v odeslaném akce objekt.

Například funkce odeslání může odeslat akce objekt, který vypadá nějak takto:

{typ:"akční_typ", užitečné zatížení:Stát * 2}

Nejprve importujte useReducer háček, pak definujte reduktor funkce s parametry: Stát a zničené akce objekt.

import {useReducer} z"reagovat";
funkcereduktor(state, { type, payload }) {
-li (typ 'countIncrease') {
vrátit se užitečné zatížení;
 } jiný-li (typ 'countDecrease') {
vrátit se užitečné zatížení;
 } jiný-li (typ 'countReset') {
vrátit se užitečné zatížení;
 } jiný {
vrátit se Stát;
 }
}

Po definování reduktor funkce, můžete vytvořit Čelit komponenta s useReducer háček.

funkceČelit() {
konst [počet, odeslání] = useReducer (reduktor, 0);
vrátit se (


 Počet je: {count}


 odeslání({ typ: 'countIncrease', užitečné zatížení: počítat + 1 })}>
 Zvýšit počet
 </button>
 odeslání({ typ: 'countReset', užitečné zatížení: 0 })}>
 Vynulovat počet
 </button>
 odeslání({ typ: 'countDecrease', užitečné zatížení: počet - 1 })}>
 Zvýšit počet
 </button>
 </div>
 </div>
 );
}

Ve výše uvedeném bloku kódu odešle první tlačítko akci určitého typu početZvýšit s užitečným zatížením počítat + 1. Tato akce je zodpovědná za zvýšení hodnoty počtu.

Druhé tlačítko odešle akci typu countReset s užitečnou zátěží 0, která resetuje hodnotu počítání zpět na 0.

Třetí tlačítko odešle akci typu početSnížit s užitečným zatížením počítat - 1 což sníží hodnotu počtu o 1.

Volba mezi useState a useReducer Hooks

Nyní, když chápete, jak používat useState a useReducer háčky, je důležité vědět, kdy použít ten správný.

Pokud váš stav nevyžaduje složitou logiku, pak samozřejmě pomocí useReducer může být přehnané.

Pokud je váš stát něco jiného než Primitiva JavaScriptu, jako jsou čísla, řetězce a booleovské hodnoty, měli byste použít useState háček. A pokud je typem stavu objekt nebo pole, měli byste zvážit použití useReducer namísto.

Jak vaše aplikace roste ve složitosti, je obtížné zvládnout stav pouze pomocí useState a useReducer háčky.

To je když můžete použít externí knihovny, jako je Redux, Jotai a Zustand. Tyto knihovny usnadňují zpracování změn stavu napříč více komponentami.

Usnadnění správy stavu pomocí knihoven JavaScriptu

Knihovny jako React, Vue a Svelte mají všechny své vlastní způsoby zacházení se stavem. Vlastní správu stavu pomocí vanilkového JavaScriptu je rozhodně něco, o co se můžete pokusit, ale mnohem jednodušší a pohodlnější je použít bitvě otestovanou JavaScriptovou knihovnu.

Pokud vytváříte komplexní aplikaci pomocí Reactu, kde potřebujete spravovat několik komponent, Redux může být pro vás tou nejlepší volbou.