React Hooks: Łatwiejsze niż myślisz.

Czasami uczenie się nowych rzeczy może być przytłaczające i nużące. Jednak tak nie jest w przypadku haków React . Jeśli jesteś kimś, kto nigdy nie poświęcił czasu na naukę hooków i używasz głównie komponentów d opartych na klasach , być może nadszedł czas, aby spróbować.

Kiedy po raz pierwszy nauczyłem się React , używałem tylko komponentów opartych na klasach , ponieważ to jest to, czego mnie uczono i co najbardziej mnie zaznajomiło. Jednak chociaż dobrze jest wiedzieć, jak korzystać z komponentów opartych na Blass, są one „przestarzałe”. Branża jest i będzie podążać ścieżką korzystania z komponentów opartych na funkcjach .

Hooki zostały stworzone jako sposób na wykorzystanie metod cyklu życia klasy i stanu wewnątrz funkcji. To zasadniczo eliminuje potrzebę stosowania komponentów opartych na klasach .

Najłatwiej to zademonstrować, patrząc na stan w komponencie opartym na klasach :

Cztery główne wnioski, na które należy zwrócić uwagę, to:

• Stan jest inicjowany przez state: {}.
• Te Thissłowa kluczowe do kierowania funkcji i zmiennych w klasach .
• Konieczność funkcji strzałek, aby uniknąć błędów ze thissłowem kluczowym w komponentach opartych na klasach .
• setState()za wszelkie zmiany w stanie .

Pierwszą rzeczą, którą powinieneś od razu zauważyć, jest brak klasy .

Drugą rzeczą zaraz po tym jest sposób, w jaki inicjujemy State :

podzielmy to w prosty sposób:

• termjest tym, czym aktualnie jest Twój stan w danym momencie. Zamiast pisać this.state.termbyłoby to po prostu term.
• setTermjest zasadniczo setStatez wyjątkiem bardziej spersonalizowanej nazwy. działa dokładnie tak samo, możesz po prostu wybrać, jak to nazwać.
• useStatejest hakiem. celem jest inicjalizacja, czemu dany klucz w stanie powinien być równy. Ponieważ używamy ciągu, inicjujemy pusty ciąg.