Techniki Zaawansowane
6 godz. 6 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorJeden z pierwszych i najbardziej popularnych wzorców w React, który przez lata był traktowany jako najlepszy sposób na wydzielanie logiki z komponentów i współdzielenie jej w wielu miejscach aplikacji. W kursie na przykładzie dowiesz się w jaki sposób można wykorzystać HOC, a także jak łączyć je ze sobą tworząc bardziej zaawansowane struktury.
Obecnie Render Props jest jedną z najczęściej wykorzystywanych praktyk pozwalającą, podobnie jak HOC, na tworzenie abstrakcji, z których możemy czerpać dane lub zachowania potrzebne w naszych komponentach. Na pierwszy rzut oka Render Props mogą przerażać, ale spokojnie – zaczniemy od prostego przykładu, który pozwoli Ci zrozumieć, że nie ma się czego bać.
Hooks to temat niezwykle ciekawy i populary, ale rzadko poruszany w sposób bardziej zaawansowany. W tym kursie dowiesz się nie tylko jak używać takich hooków jak useState, useReducer, useEffect, useContext czy useRef, ale też jak napisać swoje własne hooki, które niesamowicie uprzyjemnią pracę z Reactem.
Compound Components to prawdziwa "ciężka artyleria" Reacta – stosowana w zadaniach wymagających sporej złożoności. Ewoluowała przez lata i kiedyś zawsze spotykana była w formie klas, natomiast w tym kursie proponujemy nieco lżejsze podejście. Dowiesz się jak wykorzystując hooki możesz stworzyć Compound Component wyłącznie przy użyciu komponentów funkcyjnych.
Testy to hasło, które potrafi wzbudzić lęk u osób uczących się Reacta, lub jakiejkolwiek innej technologii. Rzadko kto jednak mówi to głośno – testy są przyjemne! Wystarczy tylko zrozumieć w jaki sposób środowisko testowe działa i jakimi rządzi się zasadami. Przerobimy to wszystko wspólnie, a na koniec kursu przekonasz się, że to faktycznie ciekawe i przyjemne zagadnienie.
W kursie przygotowana jest też garść dobrych praktyk, które pozwolą Ci spojrzeć krytycznie na niektóre fragmenty kodu i ulepszać je w taki sposób, aby stanowiąc część większej całości miały więcej sensu i wdzięku. Dowiesz się czym jest Single Responsibility Principle, jak wydzielać odpowiednio logikę z komponentów i paru innych ciekawych wskazówek.
Ten kurs został stworzony z myślą o programistach swobodnie poruszających się po podstawach i nieco bardziej skomplikowanych partiach Reacta, ale nadal czujących, że brakuje im czegoś, aby wynieść swoje aplikacje na jeszcze wyższy poziom. Rzeczy związane z zaawansowanym JavaScriptem będziemy tu wykorzystywać intuicyjnie, bez zbędnego tłumaczenia, dlatego zanim przystąpisz do tego kursu, upewnij się, że treści React od Podstaw oraz React w Praktyce są dla Ciebie jasne i zrozumiałe.
16.8.x
Cześć w tej lekcji zajmiemy się budowaniem logiki która nam pozwoli na
zamykanie naszego modala po kliknięciu poza to jasne okienko modala więc
najpierw zrobimy to tutaj w tym komponencie właśnie w tym widoku a później zauważymy
co możemy sobie wyabstrachować stworzyć abstrakcje z
po prostu tego co napiszemy tak żeby można było to współdzielić między naszym modalem
a naszym tooltip'em który również będzie potrzebował tej opcji więc
pierwsze co chcemy sobie zrobić to pobrać sobie tak naprawdę
dwa dodatkowe hooki use ref i use effect
use ref będziemy wykorzystywać do tego że
będziemy porównywać to co kliknęliśmy z tym co mamy w refie ponieważ
to ref odnosi się do tego jakby elementu w html'u który
właśnie mamy w dom'ie już w zamontowanym komponencie więc
ref przy piszemy sobie do tego co reprezentuje to
jasne okienko w naszym przypadku będzie to modal content więc nie tutaj modal
tylko głębiej ponieważ mam jeszcze modal background jak modal
background to też chcemy żeby to się zamykało więc chcemy żeby ref znalazł
się tutaj oczywiście musimy go stworzyć najpierw podobnie jak w poprzednich lekcjach
tutaj możemy sobie stworzyć modal use ref jak zwykle
podajemy tutaj null'a on później zostanie zastąpiony po zamontowaniu właśnie
tym elementem kryjącymi się pod klasą modal content okej
i drugą rzeczą którą musimy zrobić to stworzyć sobie use
effect podajemy tu oczywiście funkcję strzałkową i
po zamontowaniu się naszego komponentu chcemy dostać się do dokumentu
do którego przypniemy sobie event listener na mouse
down czyli w momencie kiedy myszka zostanie kliknięta ale nie właśnie
click tylko jakby początek tego eventu czyli mouse down
możesz sobie sprawdzić w dokumentacji na mdn jaka jest różnica między click
a mouse down i podepniemy do tego listener który
zaraz sobie napiszemy ten listener
będzie przyjmował event i ten event przyda
nam się właśnie do tego żeby sprawdzić przede wszystkim czy modal
ref w ogóle istnieje i teraz tutaj właśnie ten
event robimy tak modal ref current contains
event target
za chwilę to wyjaśnię tutaj
wpiszemy sobie return i teraz jeśli
modal ref nie istnieje albo jeśli
event target zawiera się wewnątrz
tego modal refa czyli jeśli cokolwiek co kliknęliśmy jest
albo tym modal content'em albo jakimkolwiek dzieckiem
tego co znajduje się wewnątrz modal content to wtedy wywala nas
z tej funkcji ponieważ wtedy oznacza to że klikamy
po prostu w nasz modal natomiast w momencie kiedy klikamy
poza nasz modal czyli jeśli ten warunek nie zostanie spełniony czyli jeśli klikniemy właśnie
na ten background który jest tutaj w tle on nie
spełnia tego warunku i dlatego wtedy chcemy żeby set modal visibility zostało
ustawione na false i
teraz jak sobie to otworzymy i klikniemy tutaj to powinno zniknąć i
dokładnie tak się stało tutaj jeszcze jedna bardzo ważna rzecz use
effect jak mówiłem w poprzednich lekcjach zastępuje component did mount component did update
i component will unmount will unmount służy do tego
właśnie żeby na przykład odpinać event listenery które mieliśmy przypięte
do naszego domu a właściwie do naszego dokumentu służy
to temu żeby po prostu optimalizować aplikacje i żeby zapobiec na przykład wyciekom
pamięci więc żeby użyć w use effect funkcji
która normalnie była dostępna w component will unmount musimy po prostu zwrócić
funkcję strzałkową z use effect teraz tutaj możemy
po prostu wpisać co wydarzyłoby się przed odmontowaniem komponentu my chcemy
oczywiście usunąć event listener który był na mouse down i
który miał funkcje listener i
w ten sposób jesteśmy zabezpieczeni przed tym żeby po prostu nasz komponent
nie miał tego event listener'a przypiętego nawet po jego odmontowaniu i
skoro stworzyliśmy logikę która pozwala nam na zamykanie naszego modala po kliknięciu
poza niego jeszcze się upewnimy że jak klikamy w modal to nic się
nie dzieje jak klikniemy tutaj to się dzieje okej wszystko jest git teraz jak wrócimy
sobie naszego tooltip'a to chcemy żeby wydarzyło się dokładnie to samo jeśli klikniemy poza nasz
tooltip i musielibyśmy normalnie napisać dokładnie tę samą
logikę ale zamiast tego stworzymy sobie po prostu w naszym
folderze src folder hooks i
wewnątrz stworzymy sobie plik który nazwiemy use
detect outside
click okej
i wewnątrz tego pliku stworzymy sobie teraz hook który będziemy
współdzielić między dwa komponenty chcemy tak naprawdę wyciąć
te logikę którą mamy w tym miejscu do naszego hooka tak żeby można było ją
reużywać w kilku miejscach naraz przejdźmy sobie naszego nowo stworzonego
pliku i tutaj tak naprawdę będziemy nie będziemy tworzyć komponentu
react'owego będziemy tworzyć funkcje to możemy sobie od razu wyeksportować jako main export
i
zaraz pomyślimy sobie co ona powinna przyjmować jako argumenty właściwie jako
parametry jeśli spojrzymy sobie na nasz listener tutaj to
zauważymy że on wykorzystuje dwie rzeczy set modal visibility czyli
powiedzmy taki nasz hendler do tego żeby obsługiwać
wyłączenie naszego elementu w tym przypadku jest to modal w przypadku tooltip'a
będzie to tooltip i mamy tutaj jeszcze refa po którym
sprawdzamy czy event target znajduje się jakby wewnątrz tego refa jest jego dzieckiem
bo jest po prostu sam nim więc teraz możemy sobie na
podstawie tych dwóch rzeczy wywnioskować że nasza funkcja będzie
potrzebowała właśnie refa i jakiegoś handlera teraz możemy skopiować sobie
tak naprawdę ten listener który mamy w tym miejscu i
wrzucić go do body naszej funkcji dodatkowo
w naszej funkcji będziemy jeszcze potrzebować hooka use effect który
również wykorzystaliśmy w naszym komponencie i
tutaj również możemy skopiować po prostu to co mieliśmy tutaj
wpisane nawet zastąpimy sobie to po prostu teraz
tak mamy podpięty listener mamy odpięty listener jedyne co musimy
zmodyfikować to modal ref zastąpimy po
prostu refem który jest podawany jako argument do naszej funkcji
a nasz set modal visibility wiedzieli ty tak jak mówiłem zastąpimy handlerem
ponieważ będzie to funkcja która z kolei będzie właśnie podawana przez
nasz komponent na razie sobie wróćmy jeszcze do naszego users
wywalmy wszystko to co tutaj mieliśmy potrzebujemy
tak naprawdę tylko tego refa i teraz możemy sobie zaimportować
nasz use detect outside
click i
teraz w tym miejscu jeśli uzyjemy sobie use detect i outside click podamy mu
modal ref i set modal visibility to
teoretycznie nasz hook który właśnie napisaliśmy powinien zadziałać dokładnie
tak samo jak logika którą mu napisaliśmy w tym miejscu uwaga i
wszystko działa prawidłowo więc teraz jeśli przyjdziemy sobie na szybko do naszego tips
i zastosujemy dokładnie to samo przy naszym
tooltipie to również powinno zadziałać najpierw
zaimportujemy sobie tego hooka teraz użyjemy
use detect outside click musimy
stworzyć jeszcze refa tego nie unikniemy możemy
go sobie podać tutaj i nasz handler a nasz
tooltip to jest
to wystarczy że podamy teraz tooltip ref
i to również powinno zadziałać uwaga
i działa jak złoto i
w ten sposób bardzo przyjemnie wyekstrachowaliśmy sobie
nie wiem czy jest takie słowo nawet wyciągnęliśmy sobie logikę która
do tej pory musiała być współdzielona jakoś między
komponentami na przykład za pomocą higher order componentów albo po prostu pomnażana
przy każdym komponencie tak żeby była dopasowana do jego potrzeb
natomiast teraz za pośrednictwem customowego hook'a który również wykorzystuje
jakiegoś hook'a mogliśmy stworzyć sobie taki element logiki który jest powtarzalny
i który po prostu pozwala nam zamykać nasze elementy i zajmuje
to jedną linijkę w naszym kodzie także jest to mega fajne rozwiązanie i tym sposóbem
dotarliśmy do końca działu o hooks'ach wykorzystaliśmy tutaj
w stu procentach potencjał tego co dają nam hooks'y i myślę że po
takim wstępie bez problemu i będziesz w stanie tworzyć własne hooksy będziesz w stanie
wykorzystywać hooksy które daje nam react i odkrywać też te których tutaj
nie poznaliśmy ponieważ jest ich jeszcze kilka ale tak jak mówiłem na wstępie one
są raczej dla takich edge case'ów warto jest znać poczytać
sobie dokumentację natomiast szczerze mówiąc bardzo rzadko
widziałem je gdziekolwiek w kodzie więc nie będziemy się nad tym już dłużej pochylać celem
tego działu było pokazanie ci jakie były podstawowe patterny w react'cie
które pozwalały nam współdzielić jakąś logikę czy to były higher order komponenty
że to były render propsy czy teraz nowe czyli hooksy i mam nadzieję że
to już stało się dla ciebie jasne natomiast w dalszej części kursu zajmiemy
się jeszcze takimi rzeczami jak na przykład tam compound components do których będziemy przechodzić
już teraz