useState to najbardziej podstawowy i najważniejszy hook w React, który pozwala nam zarządzać stanem poprzez posiadanie zmiennych stanu w komponencie funkcjonalnym .

Zanim zagłębimy się w temat hooków useState, najpierw zapoznajmy się z podstawami hooków i kilkoma problemami, które będą stosowane do prawie wszystkich hooków, a nie tylko do useState.

Czym więc jest hak? Jak sama nazwa wskazuje, hook to specjalna funkcja, która pozwala „zahaczyć się” o funkcje React. Kiedy piszemy jakiś komponent funkcyjny i potrzebujemy dodać lub zmodyfikować jakiś stan, możemy po prostu użyć hooków (wcześniej musieliśmy przekonwertować na komponent klasy i użyć this.state ). Więc w zasadzie hooki nie działają wewnątrz klas, raczej używamy ich zamiast pisać klasy. Kilka zasad, o których należy pamiętać podczas pisania hooków:

1. Hooki są zawsze zapisywane wewnątrz komponentu funkcjonalnego.
2. Hooki muszą być wywoływane w dokładnie tej samej kolejności w każdym renderowaniu komponentu.

Porozmawiajmy teraz o haczyku useState i sposobach jego użycia.

Deklarowanie stanu użycia

Najpierw musimy zaimportować useState w ten sposób.

Tworzenie stanu początkowego

useState jest po prostu funkcją przekazaną ze swoim początkowym stanem domyślnym jako argumentem i zwraca tablicę z dwoma wpisami. Pierwszy wpis w tablicy to aktualny stan, a drugi to metoda(funkcja), która pozwala nam zaktualizować stan.

Aby łatwo rozbić tablicę, która jest zwracana z useState, używamy takiej destrukturyzacji.

Mogliśmy przekazać obiekt jako argument do useState, ale ponieważ możemy używać wielu useState w naszych komponentach funkcyjnych, znacznie częściej stosuje się indywidualny hook useState dla każdego elementu stanu.

Aktualizuję stan

Drugim elementem zwracanym przez useState jest funkcja, która pobiera nową wartość w celu aktualizacji zmiennej state.

Oto przykład, który używa przycisku do aktualizacji stanu (liczby) przy każdym kliknięciu: ( Spróbuj tutaj )

Używając prevState do aktualizacji stanu, przekazujemy funkcję, która otrzymuje poprzednią wartość i zwraca nową. Ale możesz pomyśleć, że mogliśmy przekazać stan bezpośrednio, aby zaktualizować stan. W tym przykładzie nie spowodowałoby to dużej różnicy, ale jest to zły sposób aktualizowania stanu. Dlatego:

( Spróbuj tutaj )

Dzieje się tak, ponieważ nasza wartość count jest po prostu wartością count podczas renderowania naszej funkcji. Zawsze pokaże 1, ponieważ ustawiliśmy domyślną wartość 0. Zasadniczo zastępują się nawzajem.

Druga wersja naszej funkcji set pozwala nam przekazać funkcję, która przyjmuje poprzednią wartość. Więc za każdym razem, gdy renderuje, poprzednia wartość jest przekazywana i zwiększa licznik 3 razy.

Funkcja Wersja useState

useState może również przyjąć funkcję jako argument zamiast wartości, a ta funkcja zostanie uruchomiona tylko podczas pierwszego renderowania komponentu.

Wniosek

useState to hook (funkcja), który pozwala na posiadanie zmiennych stanu w komponentach funkcjonalnych. Przekazujesz stan początkowy do tej funkcji, a zwraca ona zmienną z aktualną wartością stanu (niekoniecznie stanem początkowym) oraz inną funkcję aktualizującą tę wartość. Tylko kilka punktów, o których należy pamiętać, dobrze jest zacząć od useState.