UseState vs. useReducer w React: Wybieranie odpowiedniego haka do zarządzania stanem

Jeśli chcesz zdobyć pracę jako programista stron internetowych, masz większe szanse na sukces, jeśli nauczysz się biblioteki React JavaScript. React jest jedną z najczęściej używanych bibliotek w branży. Jedną z najciekawszych funkcji biblioteki React jest koncepcja haków.

Hooki to po prostu funkcje JavaScript, które izolują i umożliwiają ponowne użycie logiki w aplikacji React. Do zarządzania stanem dostępne są dwa główne zaczepy — stan użycia hak i Użyj reduktora hak.

Przegląd hooka useState

The stan użycia hook jest najczęstszym sposobem obsługi stanu w React. Poniższa składnia ilustruje sposób użycia tego haka w aplikacji:

konst [stan, ustawState] = useState (initialStateValue);

W powyższym bloku kodu plik państwo zmienna przechowuje dane w pamięci między renderowaniami. I ustaw stan jest funkcją „setter”, która manipuluje państwo zmienny.

The stan użycia hook zwraca tablicę zawierającą dokładnie dwa elementy. Przyjmuje również wartość początkową dla zmiennej stanu.

Na przykład, jeśli chcesz zdefiniować zmienną stanu, która reprezentuje wiek użytkownika, z wartością początkową równą 17, zrobiłbyś to w następujący sposób:

konst [WiekUżytkownika, ustawWiekUżytkownika] = StanUżycia(17);

The ustaw wiek użytkownika funkcja jest odpowiedzialna za modyfikację pliku wiek użytkownika zmienna stanu.

ustawWiekUżytkownika(19);

Należy zauważyć, że aktualizacja stanu powoduje ponowne wyrenderowanie komponentu i niewłaściwa aktualizacja zmiennej stanu może spowodować powstanie nieskończonej pętli, która może uszkodzić kod.

W React nie zaleca się bezpośredniej modyfikacji stanu (jak pokazano w bloku kodu poniżej), ponieważ zmiany zmiennych niestanowych nie utrzymują się między renderowaniami komponentów.

wiek użytkownika = 19;

Stan jest lokalny dla komponentu, który go definiuje. Jeśli wielokrotnie renderujesz te same komponenty na ekranie, każdy komponent będzie miał swój własny, niezależny stan.

funkcjonowaćAplikacja(){
powrót (




 </div>
 )
}

W powyższym bloku kodu są dwa Przełącznik komponenty, ale każdy komponent obsługuje swój własny stan i nie polega na innym komponencie, chyba że jeden komponent współdzieli swój stan z drugim komponentem.

React obsługuje aktualizacje stanu poprzez przetwarzanie wsadowe. Oznacza to, że kiedy wywołujesz funkcję ustawiającą zmiennej stanu, zmienna stanu nie jest aktualizowana aż do następnego ponownego renderowania.

Przegląd haka useReducer

useReducer to hak React które mogą się przydać, gdy chcesz obsługiwać wiele powiązanych stanów jednocześnie. Składnia dla Użyj reduktora wygląda mniej więcej tak:

konst [stan, wysyłka] = useReducer (reduktor, stan początkowy)

W porównaniu do stan użycia, W Użyj reduktora, tam jest państwo zmienna i a załatwić funkcja, która wysyła akcje do reduktor funkcja, która obsługuje ładunki i aktualizuje plik państwo.

Załóżmy na przykład, że budujesz prostą aplikację licznika z przyciskami, które mogą resetować licznik, zwiększać wartość licznika lub zmniejszać jego wartość. Za pomocą stan użycia twój kod będzie wyglądał mniej więcej tak:

funkcjonowaćLada(){
konst [liczba, ustawLiczba] = użyjStan(0);
powrót(


 Liczy się: {liczba}


 setCount (liczba + 1)}>Zwiększ liczbę</button>
 setCount(0)}>Resetuj</button>
 setCount (liczba - 1)}>Zmniejsz liczbę</button>
 </div>
 </div>
 )
}

Powyższa implementacja działa doskonale. Ale możesz również osiągnąć te same wyniki za pomocą Użyj reduktora hak.

Ten przykład ma po prostu zademonstrować, w jaki sposób Użyj reduktora hak działa. W rzeczywistej aplikacji, Użyj reduktora jest przesadą w tym scenariuszu.

Użyj reduktora ułatwia obsługę powiązanych stanów i złożonej logiki opartej na typ przeszedł w wysłane działanie obiekt.

Na przykład funkcja wysyłania może wysłać wiadomość działanie obiekt, który wygląda mniej więcej tak:

{typ:"Rodzaj działania", ładunek:państwo * 2}

Najpierw zaimportuj Użyj reduktora hak, a następnie zdefiniuj reduktor funkcja o parametrach: państwo i zdekonstruowanych działanie obiekt.

import {useReducer} z"reagować";
funkcjonowaćreduktor(stan, {typ, ładunek}) {
Jeśli (typ „zwiększ liczbę”) {
powrót ładunek;
 } w przeciwnym razieJeśli (typ „liczbaZmniejsz”) {
powrót ładunek;
 } w przeciwnym razieJeśli (typ „Zresetuj licznik”) {
powrót ładunek;
 } w przeciwnym razie {
powrót państwo;
 }
}

Po zdefiniowaniu reduktor funkcję, możesz zbudować Lada składnik z Użyj reduktora hak.

funkcjonowaćLada() {
konst [liczba, wysyłka] = useReducer (reduktor, 0);
powrót (


 Liczy się: {liczba}


 załatwić({ typ: „zwiększ liczbę”, ładunek: liczyć + 1 })}>
 Zwiększ liczbę
 </button>
 załatwić({ typ: „Zresetuj licznik”, ładunek: 0 })}>
 Zresetuj licznik
 </button>
 załatwić({ typ: „liczbaZmniejsz”, ładunek: liczyć - 1 })}>
 Zwiększ liczbę
 </button>
 </div>
 </div>
 );
}

W powyższym bloku kodu pierwszy przycisk wywołuje akcję typu liczbaZwiększ z ładownością policz + 1. Ta akcja odpowiada za zwiększenie wartości licznika.

Drugi przycisk wywołuje akcję typu licznikZresetuj z ładunkiem 0, który resetuje wartość licznika z powrotem do 0.

Trzeci przycisk wywołuje akcję typu liczbaZmniejsz z ładownością liczyć - 1 co zmniejsza wartość licznika o 1.

Wybieranie pomiędzy useState a useReducer hookami

Teraz, gdy rozumiesz, jak używać stan użycia I Użyj reduktora haczyków, ważne jest, aby wiedzieć, kiedy użyć właściwego.

Jeśli twój stan nie wymaga złożonej logiki, to oczywiście za pomocą Użyj reduktora może być przesadą.

Jeśli twój stan jest inny niż Prymitywy JavaScript, takie jak liczby, ciągi znaków i wartości logiczne, powinieneś użyć stan użycia hak. A jeśli typem stanu jest obiekt lub tablica, powinieneś rozważyć użycie Użyj reduktora Zamiast.

W miarę jak Twoja aplikacja staje się coraz bardziej złożona, trudno jest obsługiwać stan tylko za pomocą stan użycia I Użyj reduktora haki.

To jest wtedy, gdy możesz użyć zewnętrznych bibliotek, takich jak Redux, Jotai i Zustand. Biblioteki te ułatwiają obsługę zmian stanu w wielu komponentach.

Ułatwianie zarządzania stanem dzięki bibliotekom JavaScript

Biblioteki takie jak React, Vue i Svelte mają swoje własne sposoby obsługi stanu. Samodzielne zarządzanie stanem za pomocą zwykłego JavaScript jest zdecydowanie czymś, czego możesz spróbować, ale znacznie łatwiej i wygodniej jest używać sprawdzonej w boju biblioteki JavaScript.

Jeśli budujesz złożoną aplikację za pomocą React, w której musisz zarządzać kilkoma komponentami, Redux może być dla Ciebie najlepszym wyborem.