Podstawy hooków reagowania, hooki useState

W tej historii zajmiemy się wszystkimi podstawami dotyczącymi punktów zaczepienia reakcji i dowiemy się o wbudowanym punkcie zaczepienia reakcji o nazwie useState ().

Warunek wstępny -

Powinieneś znać podstawy HTML, Javascript, czym jest React i jak to działa .

A jeśli spełnisz te warunki wstępne, możesz iść .

Co to są haki React?

• React hooki zostały wprowadzone w React 16.8 .
• Haczyki Reacta to w zasadzie funkcje, które pozwalają ci obsługiwać stan aplikacji internetowej, i pozwalają ci łatwo pracować z innymi funkcjami Reacta, takimi jak componentDidMount () , componentDidUpdate (), bez pisania klas .
• Możesz używać haków React tylko w komponentach funkcjonalnych , a nie w komponentach zdefiniowanych przez klasę.
• W prostych słowach, możemy zdefiniować punkty zaczepienia reakcji jako funkcje, które pozwalają „podpiąć się” do stanu reakcji i funkcji cyklu życia z komponentów funkcjonalnych .
• Istnieje wiele typów wbudowanych zaczepów React -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

Co to jest useState?

• useState jest jednym z najpopularniejszych i najczęściej używanych haków React.
• useState jest używany jako punkty zaczepienia zarządzania stanem określonego składnika.
• Hak useState służy do obsługi stanu naszych komponentów.
• useState pozwala nam łatwo i wygodnie tworzyć i obsługiwać zmienne stanu .
• W useState ustawiamy początkowy stan zmiennej stanu i wykorzystania useState zdefiniowane funkcji do zmiany tego stanu tej zmiennej stanu ze stanem pierwsze pytania do stanu obecnego .
• Możemy używać useState tylko w komponentach funkcjonalnych, a nie w komponentach klasowych .
• useState działa tak samo jak this.stateiw komponentach opartych na klasachthis.setState React .
• Nie martw się, jeśli nie rozumiesz stanu i poprawnie używaszState, będzie to całkowicie jasne w twojej głowie, gdy zrozumiesz to za pomocą przykładu kodu.

W tej sekcji utworzę prosty licznik za pomocą hooka useState , abyś mógł łatwo zrozumieć, jak działa useState i kiedy go używać.

• Kod -
• Kod Objaśnienie -
• W linii tego kodu zaimportowaliśmy useStatehook z ‘react’.
• Następnie utworzymy funkcjonalny komponent o nazwie Appw pliku App.js.
• W tym komponencie funkcjonalnym utworzymy zmienną stanu o nazwie count i funkcję useState o nazwie setCount.
• W szóstym wierszu tego kodu używamy hooka useState, w którym wywołaliśmy zmienną stanu count i aby zmienić stan tego licznika, stworzyliśmy funkcję o nazwie setCount.
• Tutaj w useState(0)0 wskazano początkowy count stan zmienności stanu. Więc na początku, gdy nasz komponent aplikacji ładuje, wartość count zmiennej stanu będzie równa 0. I używając setCountmetody będziemy mogli zmienić wartość count zmiennej stanu.
• Teraz stworzyliśmy metodę o nazwie, decreamentktóra będzie zmniejszać count wartość zmiennej stanu o 1 za każdym razem, gdy klikniemy przycisk (dekrementacja -) . Zasadniczo to, co robi ta metoda, to ustawi stan countzmiennej na count-1using setCountmethod.
• Teraz stworzyliśmy metodę o nazwie, increamentktóra będzie zwiększać count wartość zmiennej stanu o 1 za każdym razem, gdy klikniemy przycisk (zwiększ +) . Zasadniczo to, co robi ta metoda, to ustawi stan countzmiennej na count+1using setCountmethod.
• W return sekcji tego kodu nie wymaga objaśnień, aw przycisku ( inkrementacja +) przekazaliśmy increament metodę w onClick zdarzeniu, aw przycisku (dekrementacja -) przekazaliśmy decreamentmetodę.

Wniosek

Dlatego w tym artykule omówiliśmy podstawy hooków React i czym jest hook useState, jak to działa i jak go zaimplementować .

Mam nadzieję, że podobało wam się czytanie i uczenie się.

Jeśli spodobał Ci się ten artykuł, nie krępuj się i pokaż innym, aby mogli się z niego uczyć.