React hooks - czym s膮 i jakie maj膮 zastosowanie?

React hooks to nowe podej艣cie do pisania komponent贸w. Wcze艣niej g艂贸wnie korzystali艣my z klas. Robili艣my to dlatego, 偶e posiadaj膮 one wiele przydatnych metod, takich jak np. metody cyklu 偶ycia czy stan, za艣 funkcje ich nie posiada艂y. Hooki to zmieniaj膮 i pozwalaj膮 nam teraz tworzy膰 komponenty funkcyjne, kt贸re pozwol膮 korzysta膰 z cyklu 偶ycia, b臋d膮 posiada膰 stan i wiele innych.

Dodatkowym plusem jest bardzo proste tworzenie reu偶ywalnych komponent贸w. Przy korzystaniu z klas musieli艣my si臋 nieco nagimnastykowa膰 np. pisz膮c HOCi (high order components).

Poni偶ej pokr贸tce przedstawi臋 kilka podstawowych hook贸w.

Zarz膮dzanie stanem w react.js przy pomocy useState

Pierwszym, podstawowym hookiem, kt贸rego b臋dziemy u偶ywa膰 najcz臋艣ciej, jest useState. Jest to odpowiednik this.state = {} u偶ywanego w komponentach klasowych.

Pozwala utworzy膰 stan naszej aplikacji razem z metod膮 aktualizuj膮c膮 dan膮 zmienn膮.

Na poni偶szym zdj臋ciu mamy przyk艂ad, jak mo偶emy go zainicjalizowa膰. Warto艣膰 przekazana do useState zostanie przypisana do zmiennej value, a setValue pozwoli nam na aktualizacje stanu.

Ustalanie warto艣ci pocz膮tkowej

Je偶eli chodzi o zapis mamy tutaj do czynienia z destrukturyzacj膮. R贸wnie dobrze powy偶szy kod mogliby艣my zapisa膰 w ten spos贸b i dzia艂a艂oby to identycznie:

Zdestrukturyzowany state

Aby zaktualizowa膰 stan oraz wyrenderowa膰 aplikacj臋, musimy wykona膰 metod臋 przypisan膮 do zmiennej - w naszym przypadku setValue. W poni偶szym zapisie wywo艂anie updateValue przypisze now膮 warto艣膰 do value i b臋dzie dost臋pna dopiero w nast臋pnym renderze. Co to znaczy? Gdyby艣my w updateValue, po wywo艂aniu setValue, chcieli np. wykonsolowa膰 now膮 warto艣膰, otrzymaliby艣my star膮. Wynika to z tego, 偶e stan w danym renderze si臋 nie zmienia. I dopiero w kolejnym b臋dziemy mieli dost臋p do nowej warto艣ci.

setValue

Warto doda膰, 偶e mo偶emy zadeklarowa膰 wiele zmiennych stanowych. I korzysta膰 z nich niezale偶nie od innych.

Cykl 偶ycia komponentu

W komponentach klasowych mogli艣my korzysta膰 z metod cyklu 偶ycia komponentu takich jak np. componentDidMount czy componentDidUpdate, w funkcyjnych mamy do dyspozycji useEffect. Jest to odpowiednik wymienionych wcze艣niej componentDidMount, componentDidUpdate oraz componentWillUnmount.

useEffect b臋dzie wykonywany w momencie, gdy komponent zostanie za艂adowany, odmontowany lub za ka偶dym razem, gdy jaka艣 warto艣膰 stanu zostanie zmieniona. Chyba, 偶e okre艣limy, w jakim wypadku chcemy wykona膰 metod臋. Robimy to, podaj膮c jako drugi argument zmienn膮 lub tablic臋 z zale偶no艣ciami, kt贸re okre艣l膮 kiedy ma si臋 wywo艂a膰 hook.

Musz臋 wspomnie膰 o tym, 偶e mo偶emy korzysta膰 z kilku metod cyklu 偶ycia jednocze艣nie, czyli dla ka偶dej zmiennej mo偶emy napisa膰 inny efekt. Przyk艂adowo:

useEffect

Pierwszy efekt zostanie wykonany (pomijam za艂adowanie i odmontowanie komponentu) gdy stan aplikacji si臋 zmieni, a drugi gdy value zostanie zmienione.

Optymalizacja programu z useMemo

Cz臋sto chcemy wykona膰 jak膮艣 operacj臋 obliczeniow膮, kt贸ra potrzebuje danych np. podanych przez u偶ytkownika. Aby zoptymalizowa膰 program warto wykorzysta膰 hook useMemo, kt贸ry wywo艂uje dan膮 funkcj臋 tylko wtedy, gdy podana warto艣膰 r贸偶ni si臋 od poprzednio podanej.

useMemo

Hook useContext - korzystanie z kontekstu

Je偶eli korzystali艣my w naszej aplikacji z createContext to w bardzo prosty spos贸b, przy pomocy hook贸w, mo偶emy odebra膰 dane przekazane w kontek艣cie.

useContex

Teraz pod zmienn膮 theme mamy wszystko, co przekazali艣my jako value w Providerze w komponencie wy偶ej.

Hooks, a biblioteki zewn臋trzne takie jak react-router czy redux

Na koniec warto doda膰, 偶e biblioteki zewn臋trzne, z kt贸rych bardzo cz臋sto korzysta si臋 w po艂膮czeniu z Reactem, takie jak np. react-router czy redux, te偶 wspieraj膮 hooki i udost臋pniaj膮 w swoim API.

Dla przyk艂adu react-router udost臋pnia 4 nowe hooki:

  • useHistory,
  • useParams,
  • useLocation,
  • useRouteMatch

A redux np:

  • useDispatch,
  • useSelector,
  • useStore

Podsumowanie

Hooki, kt贸re przedstawi艂em powy偶ej, to nie wszystko. Zach臋cam, aby zajrze膰 do dokumentacji i przetestowa膰 komponenty funkcyjne na w艂asn膮 r臋k臋. To podej艣cie pozwala nam w prosty spos贸b utrzyma膰 czysty kod i u艂atwia wiele rzeczy.

Szukasz efektywnej agencji interaktywnej?

Efektywno艣膰 to najwa偶niejszy parametr cechuj膮cy skuteczne dzia艂ania w Internecie. Agencja marketingowa RekinySukcesu.pl wie jak osi膮gn膮膰 za艂o偶one cele w b艂臋kitnym i czerwonym oceanie marketingu online.

Ponad 300 zadowolonych Klient贸w, ponad 2 000 przeszkolonych os贸b, a nam ci膮gle ma艂o. Sumuj膮c wszystkie dane, u偶ytkownicy sp臋dzili ju偶 艂膮cznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. Dzi臋ki temu o Twoim Kliencie wiemy wszystko, a nawet i wi臋cej. Nie uznajemy kompromis贸w. Dlatego warto klikn膮膰 jeden z przycisk贸w poni偶ej.

Zobacz inne:

close
keyboard_arrow_up