Nowoczesny React: Reguły używania hook'ów

0:00Musimy powiedzieć sobie o zasadach i regułach używania huków, dlatego, że do

0:05tej pory szliśmy sobie taką wesołą ścieżką.

0:07Nigdy nie spotkaliśmy po prostu jakiegoś przypadku, w którym źle

0:12byśmy użyli danego huka.

0:13Chodzi mi tutaj o deklarację.

0:15Być może ten efekt nie działał tak jakbyśmy chcieli, ale generalnie

0:18uzupełniając dependencies i wartości West End wszystko było w porządku.

0:23Natomiast huki nie były od zawsze w Reakcie.

0:27I tutaj należy Ci się trochę kontekstu historycznego.

0:30Dawniej, żeby używać stan, musielibyśmy mieć tak zwany komponent

0:34klasowy i ten komponent klasowy.

0:37On był w stanie obsługiwać stan jako jedyny.

0:40Dlatego gdybyśmy chcieli aktualizować stan, wtedy używało się czegoś takiego

0:45jak set state jako dissed state.

0:48No i stan definiowany był w ten sposób.

0:51Zwróć jednak uwagę, że w tej nowoczesnej dokumentacji i w nowoczesnym Reactie

0:55rekomendacja jest taka, żeby użyć funkcji.

0:58I tutaj see how to migrate będzie dla Ciebie materiałem, który powinien Ci

1:02pozwolić na migrowanie, jeśli byłaby taka konieczność jakichś starszych projektów,

1:07właśnie napisanych we wcześniejszej wersji Reacta właśnie sukcesywnie

1:12do komponentów funkcyjnych.

1:14Jednak Hooki mają swój zestaw reguł i ten zestaw reguł zobacz jest bardzo

1:18ładnie opisany tutaj Rules of hooks.

1:20Można to sobie znaleźć właśnie w dokumentacji Rule of Hooks.

1:25No i tutaj mamy zawsze top level i zawsze w komponencie funkcyjnym.

1:31Czyli musimy mieć body of the function component albo top level

1:36in the body of custom hook.

1:38Czyli możesz sobie zrobić własny custom hooki na podstawie istniejących.

1:41I to jest bardzo ciekawe, dlatego, że to pozwala nam po prostu wydzielić logikę

1:46naszego komponentu i zrobić sobie właśnie takie kompozycyjne podejście

1:51do logiki komponentów.

1:53Czyli kilka komponentów może wykorzystywać tą samą logikę.

1:56Moglibyśmy sobie zauważyć, że tutaj gdybyśmy zapakowali sobie to set

2:00selected names i w ogóle people.

2:03Możemy sobie zdefiniować własnego hooka i use people i te wszystkie elementy

2:08spakować razem, tak żeby zrobić sobie własnego customowego hooka.

2:13To jednak jest temat na późniejsze rozważanie po tym szkoleniu.

2:17Tak, żeby sobie zrobić własne huki i spróbować sobie tego

2:21kompozycyjnego podejścia.

2:22Natomiast zobaczmy sobie, jakie są reguły do tego, żeby używać huków.

2:27Jak musimy do tego podejść.

2:29Przede wszystkim nie możesz mieć hooka, który ma jakąś conditional logic, czyli w

2:33zależności od tego, jaki jest warunek, wywołuje się warunkowo.

2:37My tutaj mamy akurat taki szczęśliwy przypadek, że gdybyśmy sobie wyobrazili,

2:42że tutaj byłby If i zrobilibyśmy sobie jakiś warunek, czyli celowo tutaj wrzucę

2:48coś, co będzie po prostu na ten przykład nie do końca poprawne.

2:52Chodzi nam tylko o to, żeby zobaczyć jakiś konkretny warunek.

2:56No to widzimy, że to kompletnie nie ma sensu z perspektywy samego kodu samego

3:00JavaScriptu, dlatego, że nie mamy dostępu po prostu do SetSelected names dlatego, że

3:05If ma zasięg w tym wypadku leksykalny tutaj i ten zasięg leksykalny tego

3:11constant, który tutaj jest, spowoduje, że on nie wyleje nam na zewnątrz tego

3:15ifa, czyli nie mamy do tego dostępu.

3:17Jednak możemy sobie wyobrazić, że chcielibyśmy zobaczyć coś takiego, że

3:22selectujemy na przykład Johna tylko i wyłącznie, jeżeli coś

3:26więcej jest za selectowane.

3:27Czyli na przykład jeżeli selected names length jest większy od 1, to wtedy za

3:33selectuj Johna, czyli jeżeli jest przynajmniej 1, weźmy to sobie większe od

3:390, czyli będziemy mieli przynajmniej 1 albo więcej.

3:42Jeżeli jest select to wtedy tylko wtedy select id Johna.

3:47Zauważ, że nie możemy tego zrobić dlatego, że tutaj dostajemy informację od Clinta

3:51React use effect is could conditional.

3:54Czyli od razu dostajesz informację zwrotną od Clinta.

3:57W takim układzie jak doczytasz dalej w tej dokumentacji my używamy dokładnie

4:03tego sline plugin React Hooks.

4:05On jest skonfigurowany out of the box.

4:07Właśnie w tym foldzie wita.

4:09I mamy tutaj taką rekomendację, żeby go używać.

4:12Natomiast mamy go już skonfigurowanego w naszym projekcie, więc możemy to zrobić.

4:16Zobacz, nie da się tego zrobić striczem.

4:18Nie możemy tego zrobić w momencie, gdy mamy tutaj classComponent, bo on nie używa

4:24hooków i używamy sobie tutaj jednego hooka w drugim.

4:28Czyli jak gdyby zamiast zrobić to na zewnątrz, zamiast zdefiniować te wszystkie

4:33hooka na zewnątrz, w środku jednego hooka mamy inny.

4:37Zauważ, że jest pewna konwencja nazywania tych hooków jako use.

4:41Czyli mamy use state.

4:43Mamy coś takiego jak use context.

4:45I nawet tutaj w przypadku naszego custom hooka on się nazywa use window built, więc

4:52mamy tutaj konwencję nazewniczą właśnie z takim use, żeby poprzedzać

4:56każdego hooka nazwą use.

4:58Czyli mamy tutaj jeszcze takie dobre praktyki w pisaniu huków w nazywaniu huków

5:04i w poszukiwaniu ich w innych bibliotekach, bo zauważysz, że dużo

5:08różnych bibliotek korzysta z huków, czyli dostarcza właśnie takiej logiki

5:12zewnętrznej, która może być współdzielona poprzez inne komponenty.

5:16Gdybyśmy chcieli faktycznie tak zrobić, że jeżeli set Selected Names Land jest

5:20większy od zera, to wtedy i tylko wtedy chcemy selectować Johna.

5:23Musimy przenieść ten warunek tutaj.

5:26Ale wtedy mamy do czynienia z tym, że znowu musimy się pilnować.

5:30I to set selected names, który tutaj sobie wymyśliłem, będzie moim

5:34dependency, który mam w środku.

5:36Czyli generalnie mamy coś takiego, że to set selected names, które mamy tu

5:41weźmy sobie to poprawmy będzie miało ten sam błąd, który mieliśmy wcześniej.

5:46Żeby to zrobić poprawnie, musiałbym skorzystać tutaj z body tej funkcji.

5:51Czyli docelowo chciałbym to sobie zrobić na tej zasadzie, że jeżeli set selected

5:56names faktycznie jest większe, tak?

6:00No to wtedy zwracam to.

6:03fajnie by było sobie to wtedy opakować.

6:06A jeśli nie, to zwracam SN, ponieważ nie chcę zmieniać

6:11stanu i wtedy sprawdzam sobie SN, a nie selected names.

6:16Zauważ, że jakby zawsze mamy jakiś sposób do tego, żeby sobie to w ten sposób ograć.

6:21Co więcej, moglibyśmy sobie to uprościć, zastosować tu Turner i operator, że jeżeli

6:26length jest większe od zera, to wtedy zwracamy taką tablicę razem z

6:30Johnem, a jeśli nie, to zwracamy SN.

6:34I teraz możemy sprawdzić, czy nasz kod działa poprawnie.

6:38Teraz, jeśli otworzymy sobie aplikację, zauważymy, że John nie jest selektowany.

6:41Musielibyśmy się w ciągu tych dwóch sekund wyrobić, żeby zaznaczyć chociażby jedną

6:46osobę i wtedy John zostanie delegowany.

6:48Czyli odświeżam, wyrabiam się.

6:50W ciągu tych dwóch sekund zaznaczam kogoś i zobacz, że John jest zaznaczony.

6:55Pamiętaj, że ten efekt w ciągu tych dwóch sekund wywoła się tylko jednorazowo.

7:00Dlatego właśnie musimy to zrobić w ten sposób.

7:02Tutaj jeszcze o jedne nawiasy cząsteczkowe za dużo.

7:06Możemy to sobie tak właśnie uprościć.

7:09Mamy set selected names z wszystkimi elementami.

7:12Tak by to wyglądało.

7:13Więc jeżeli masz właśnie takie przypadki, że chcesz uruchomić conditional logic albo

7:19jakąś pętlę albo try catch, to musisz jak gdyby skorzystać z ciała tego hooka i tam

7:26w środku na przykład jakiegoś callbacku, z którego ten hook korzysta,

7:30ustalić swoją conditional logic.

7:32Czyli te reguły warunkowe przenosimy do środka.

7:35Nie można jak gdyby warunkowo wywoływać hooków.

7:40Kontrakt jest taki, że za każdym razem people page musi być tak zwanym pure

7:45function, czyli jak gdyby nie dość, że musi dla tych samych danych wejściowych

7:50zwracać te same dane wyjściowe, to jeszcze dodatkowo mamy taką regułę, że wszystkie

7:55huki muszą w takiej samej kolejności i tą samą ilość razy się wywołać, która jest

8:01spodziewana, która została tutaj zadeklarowane.