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 poprzedniej lekcji stworzyliśmy bliźniaczy komponent który co
prawda wygląda nieco inaczej od naszego pierwszego pierwotnego komponentu listy natomiast
jego funkcja związana z zamykaniem się czy też z zapadaniem jest
niemal identyczna dlatego chcielibyśmy stworzyć teraz higher order component który
będzie współdzielił tę logikę dla obu tych komponentów więc
pierwsze co chcemy zrobić to stworzyć sobie folder specjalnie
dla właśnie higher order komponentów możemy go nazwać hoc od skrótu i wewnątrz
niego stworzymy sobie plik with collapse js tutaj taki mały wstęp
większość higher order component które widziałem w swoim życiu zaczynały
się z małej litery i zazwyczaj właśnie od słowa with czyli
znaczy że ona coś oplatają jak sobie opleciemy to w jakiś inny komponent
to wtedy właśnie to fajnie widać że ten higher order component dodaje nam jakąś
możliwość jakąś funkcję do naszego komponentu natomiast ta
druga część nazwy zazwyczaj odnosi się właśnie do tej funkcji którą dodajemy
tutaj akurat jest to funkcja zapadania się więc collapse tutaj jak najbardziej
pasuje pierwsze co sobie zrobimy to zaimportujemy sobie react'a jak ta i
i teraz co chcemy zrobić z higher order komponentem jak
chcemy go stworzyć pierwsze co tak chcemy stworzyć sobie funkcję
która przyjmuje komponent drugie to będzie zwrócenie funkcji
która zwraca nam komponent więc
zaczniemy sobie od tego pierwszego to
co przyjmuje nasza funkcja to oczywiście komponent i teraz wewnątrz
tej funkcji chcemy zwrócić taką normalną funkcję którą byśmy tworzyli jakbyśmy stworzyli
na przykład jakiś tam komponent wielką literą
i tutaj byśmy
już pisali sobie nasz jsx więc zrobimy teraz dokładnie to samo tylko
nie zrobimy consta tylko bezpośrednio z tej funkcji którą tutaj
stworzyliśmy zwrócimy sobie naszą funkcję więc teraz tutaj stworzymy
sobie funkcję strzałkową która
będzie nam zwracać nasz wrapped component teraz sobie to
wyeksportujemy i teraz
zanim przejdziemy tutaj do dodawania jakiejś logiki do naszego higher order component'u
to chcemy najpierw sprawdzić czy to w ogóle działa więc
teraz stwórzmy sobie jakiegoś tutaj props'a który będzie dostawał
cokolwiek co mu chcemy podać załóżmy że to będzie data mogłoby
to się nazywać jakkolwiek może to się nazywać roman nawet i
tutaj podamy mu jakiegoś stringa powiedzmy że będzie hello roman i
teraz jeśli ten komponent będzie działał to powiedzmy
że wejdę sobie do mojego columns zaimportuje tutaj with
collapse i teraz eksportując
mój komponent oplotę go w komponent
with collapse i teraz co by to dało wróćmy
sobie do mojego komponentu columns i zdestrukturyzujmy
tutaj props'a roman jeśli wejdę teraz do mojego jsx'a
i powiedzmy że na samej górze w moim
buttonie użyję tego props'a to
teraz ten button powinien zamienić się na hello roman i tak właśnie się stało
więc stworzyliśmy nasz pierwszy higher order component jeśli
jest to dla ciebie jeszcze nie do końca jasne co tutaj się wydarzyło dlaczego ten hello roman tutaj
się pojawił to zaraz ci to wyjaśnię do tej pory poznane ci na pewno były rozwiązania
gdzie to rodzic przekazywał jakieś propsy do swojego dziecka więc jeśli jesteśmy
na przykład teraz w widoku tips to jeśli sobie tutaj wejdziemy to
ten roman mógłby się znaleźć tutaj w taki oto
sposób natomiast higher order component trochę inaczej do
tego podchodzi to znaczy że w rodzicu nie widzimy w ogóle że coś tutaj się wydarzyło
że jakieś nowe props'y zostały dodane do naszego komponentu natomiast wewnątrz
samego komponentu czyli tutaj w naszym columns doszło
do rozszerzenia właśnie możliwości tego komponentu poprzez oplecenie go
tutaj w ten higher order component a przypomnijmy
że higher order component to jest funkcja która zwraca komponent i ta funkcja
właśnie dodała pewną rzecz do naszego komponentu z
racji że przy samym eksporcie oplatamy sobie nasz komponent w te funkcje
to w momencie eksportowania tego komponentu podawany jest
do niego props roman więc teoretycznie w naszym
columns możemy sobie teraz tego propsa wyciągnąć w dokładnie taki sam
sposób jakby został on przekazany przez naszego rodzica teraz załóżmy
że w naszym higher order component ten
roman nie będzie hello roman tylko będzie true i
niech będzie już się nazywał niech się
nazywa tak jak powinien czyli is collapsed i teraz wracamy
sobie do naszego columns romana zamieniamy na is collapsed
i teraz w moim high order komponencie
stworzyłem właśnie propsa is collapsed który został podany do naszego columns
z racji tego oplecenia w tym miejscu i mogę teraz z poziomu
tego higher order komponentu sterować tym czy nasza lista jest widoczna
czy nie więc jeśli teraz zrobię false to lista
się pojawi jeśli zrobię true to lista nam zniknie i pewnie domyślasz
się już że możemy w ten sposób wziąć sobie teraz całą logikę
którą mieliśmy w naszym items list wyciągnąć
ją do naszego higher-order komponentu i tam zastosować ją właśnie
po to żeby przekazywać ją do naszych komponentów
jedyne co musimy zrobić to tutaj trochę rozbudować nasz higher
order component ponieważ on będzie teraz zwracał komponent niefunkcyjny
a klasowy z tego względu że musimy mieć tutaj state dlatego teraz musimy
tutaj zwrócić komponent ale klasowy możemy go nazwać with collapse
tylko pisany większą literą wtedy
będziemy wiedzieć że to jest ten sam komponent tylko że tutaj po prostu zwracamy
ten komponent klasowy with collapse to jest oczywiście
klasa extends react component
i teraz wewnętrz niego oczywiście tak jak zawsze wpiszemy sobie
funkcję render return okej
i znowu nam się wszystko pojawia teraz wewnątrz
naszego react komponentu musimy zaimplementować
właśnie logikę dotyczącą tego wszystkiego co mieliśmy tutaj to
co jest fajne to że możemy prosto teraz skopiować nie musimy tego pisać na nowo
to jest dokładnie taki
sam komponent jak mielibyśmy wszędzie indziej jedyna różnica
jest taka że tutaj musimy teraz dodać is collapsed to będzie
this state is collapsed a
nawet możemy to trochę ulepszyć dodając tutaj
is collapsed this state musimy
to zdestrukturyzować okej i drugim
propsem który chcemy podać jest ten toggle który będzie zmieniał w naszym
higher order komponencie ten stan który właśnie odpowiada za to że coś się pojawia albo się
nie pojawia więc teraz jak widzisz domyślnym state'em jest false dlatego
nasza lista się pojawiła natomiast w naszym wrapped komponencie
musi jeszcze pojawić się funkcja toggle podamy
którą podamy po prostu niżej i teraz wracając do naszego columns
wyciągając sobie is collapsed i toggle
możemy zaaplikować tę funkcję toggle
bezpośrednio tutaj w naszym button'ie w taki
oto sposób i teraz jeśli wszystko poszło dobrze to zarówno
props toggle jak i props is collapsed zostały podane do
naszego columns przez higher order component i teraz to on
zawiera tę logikę dotyczącą tego czy coś się ma pojawiać czy
się ma nie pojawiać uwaga klikamy i wszystko
działa jak należy teraz to co
jest jeszcze lepsze to że możemy usunąć sobie tę logikę z naszego komponentu
item list możemy właściwie to zamienić na komponent funkcyjny
wyciągniemy
sobie tutaj is collapsed i toggle
poprawimy tylko to co jest do poprawienia
tutaj jeszcze był ten const związany z tą z
nazwami klas więc fakt faktem musimy jeszcze zrobić
return tutaj osobno ponieważ tutaj będzie const to
możemy wywalić i to co musimy zaimportować tylko to
podobnie jak w naszym columns with collapsed i
opleść nasz komponent
listy w ten with collapsed i teraz oba
te komponenty współdzielą logikę związaną właśnie z width collapsed oczywiście
to są osobne instancje więc to nie jest tak że jeśli tutaj zapadnie mi się to
na stronie głównej też zapadnie tylko
tutaj mam jakiś błąd okej związany z tym że tutaj nie usunąłem this state
już nie mamy this state okej czyli tak jak mówiłem
tutaj może mi się zapaść a tutaj nadal jest widoczne jeśli je zamknę to
jeden i drugi komponent nie ma na siebie wpływu zwłaszcza że ten stan komponentów
nam się resetuje po przejściu na osobny route więc tym bardziej jakby
tutaj nie ma żadnego sprzężania ale nawet jakby leżały obok siebie to
i tak nie byłoby w ten sposób że jeden do drugiego ma
coś w ogóle wspólnego nawet możemy to teraz przetestować w docs'ach
prostu sobie zaimportujemy columns o
i pokażę ci teraz ten nam się zapada o
one są totalnie niezależne od siebie ale współdzielą
tę logikę związane właśnie z zapadaniem przez co ten komponent stał się
dużo łatwiejszy dużo prostszy do napisania podobnie jak ten zresztą nie
ma tutaj klasy nie ma tutaj żadnego dodatkowego stanu jest
tylko i wyłącznie ta warstwa prezentacyjna i wszystko co dotyczy stylów natomiast
ta logika związane z pojawieniem się i znikaniem elementów jest w higher order
component co jest jakby super bo nie musimy powtarzać tego kodu
on jest po prostu zamknięty tutaj w tym miejscu a w następnej lekcji
pokażę ci co możemy zrobić żeby te higher order komponenty były jeszcze ciekawsze
będziemy je trochę układać tak jeden na drugim ale to w następnej lekcji