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ść przyszła pora na kolejny hook tym razem będzie to use ref
i zanim przejdziemy do niego to chciałbym ci tylko zrobić takie małe wprowadzenie do tego
czym są refy refy to są takie elementy w react
które pozwalają nam dobrać się do takich najbardziej wyjściowych
elementów renderowanych przez reacta to znaczy że to co mamy tutaj jest
tak naprawdę częścią jsx'a to nie jest prawdziwy html ale z tych elementów jest
jest później renderowany za pomocą właśnie metody create element prawdziwy
html który później wyświetlany jest użytkownikom i żeby dobrać się
na przykład do prawdziwego h2 które zostanie wyświetlane na naszej stronie możemy
zrobić to tylko za pomocą właśnie tak zwanych refów które dodajemy
jako prop tutaj do naszych elementów w jsx'ie
i zaraz ci bardzo prosty sposób o co w tym właściwie chodzi bo łatwiej to pokazać
niż wytłumaczyć stwórzmy sobie dwie
rzeczy input i button chcemy
żeby po kliknięciu na button focus'ował nam się input z
jakiegoś powodu załóżmy że po prostu tak musi być czyli musimy wpłynąć tak naprawdę
na ten właśnie taki element naszego domu już
tutaj na stronie w jakiś taki bardzo imperatywny sposób czyli
klikając na button wywołujemy jakąś akcję związaną z input'em i
żeby tego dokonać musimy właśnie wykorzystać refa wykorzystamy sobie
do tego nowe hooki które mamy czyli use ref stworzymy
sobie tutaj komponent w którym zrobimy tak
zwany explicit return i
teraz to co musimy zrobić właśnie to stworzyć
my input ref i
wywołać funkcję do której na początku podamy null'a i
musimy tutaj właśnie podać jakąś taką początkową wartość ponieważ przed zamontowaniem się
komponentu tutaj nie ma tak naprawdę nic w sensie komponent
musi się zamontować żeby ten use ref mógł dotrzeć do tego input'a więc
na razie jest null ale po jakbyśmy mieli tutaj na przykład funkcję use effect
albo w klasie mieliśmy component did mount to wtedy moglibyśmy się dopiero do tego refa
odwoływać w jakiś sposób a tutaj nie musimy tego robić przez właśnie przez use effect albo
component did mount ponieważ nikt tak szybko nie kliknie w button najpierw komponent
się zamontuje a później dopiero ktoś ewentualnie kliknie w ten button żeby się sfokusować więc to co musimy
jeszcze zrobić to właśnie handle w
którym powiemy my input ref i tutaj
trochę magii ale za chwilę o tym opowiem focus co ja tutaj zrobiłem
sprawdźmy to
oczywiście musi być const teraz jeśli
wszystko poszło dobrze jeśli przekażę sobie te funkcje tutaj to po kliknięciu
na ten button włącz mi się focus o taki właśnie na tym inpucie uwaga
okej dlaczego to nie wyszło bo
nie podałem refa tak jak mówiłem ref to jest prop który podajemy do elementu
więc muszę tam my input ref w tym miejscu podać żeby on
wiedział że ten use ref ta funkcja odwołuje się właśnie do tego elementu input
więc teraz powinno być dobrze uwaga i
sfokusowałem się na inpucie więc wszystko działa jak należy i teraz należy
ci się chwila wyjaśnienia co tu się właściwie wydarzyło więc jeszcze raz chcąc
wpłynąć na focus input'a muszę
dostać się do tego najbardziej wyjściowego elementu html'a który
został wyrenderowany w naszym tutaj na naszej stronie w naszej aplikacji żeby
to zrobić muszę właśnie wykorzystać use ref czy też po prostu refa
ktry pozwala mi na dotarcie do tego elementu i dotarcie na przykład właśnie do
takiej metody jak focus która odpowiada za to że po
prostu fokusuje się na tym elemencie dlatego stworzyłam sobie consta
my input ref w którym wykorzystałem hooka use ref który właśnie tworzy tego
refa a następnie przekazałem
tego ref'a do elementu na który chcę wywierać jakiś taki imperatywny
wpływ następnie w funkcji
handle click odniosłem się do tego ref'a i
wywołałem metodę focus i teraz czym tak naprawdę jest ten obiekt current
current najłatwiej tłumaczyć jako po prostu obiekt który przechowuje
wszystkie informacje na temat tego inputu do którego się odwołujemy więc to
w nim właśnie będą zawarte wszystkie metody dotyczące tego inputu ale też wszystkie
style i wszystko inne co dotyczy w ogóle tego elementu w htmlu to
co ważne to zmiany wewnątrz current więc nawet jeśli
zmienili byśmy szerokość tego inputu poprzez właśnie
current style width to nie wywołuje render'a
to tylko powoduje że po prostu widzimy te zmiany jakby live na
naszym ekranie ale nasz komponent nie jest rerenderowany
i żeby ci to udowodnić to teraz stworzymy sobie jakąś super prostą animacje tylko najpierw stwórzmy
sobie może jakiś tutaj obiekt ze stylami w którym powiemy że transition
dla naszego obiektu trwa jedną sekundę i będziemy odwoływać się tutaj do
width oczywiście złamiemy tutaj wszystkie zasady jeśli chodzi o
performance animacji zaraz ci wytłumaczę dlaczego na razie tylko tutaj dodamy
to style okej i
teraz wewnątrz naszej funkcji w której fokusujemy się na naszym inpucie dodamy
jeszcze style width 200
pikseli teraz
jak kliknę coś nie działa czyżby
dlatego że było niezdefiniowane tak
musimy zdefiniować sobie długość naszego elementu żeby on wiedział
od czego jakby animować to width czemu width nie animujemy ponieważ wywołuje
repaint za każdym razem przy każdej klatce na cały nasz layout
jest po prostu przemalowywany za każdą klatką którą on maluje przy
długości tego elementu więc jest to bardzo bardzo bardzo zła praktyka powinniśmy
tutaj tak naprawdę robić transform i wewnątrz robić
scale x na przykład 1.3 tylko tutaj jest taki problem
że wtedy przykryje nam ten button
i trochę nam przesunie się do lewej bo możemy jeszcze zrobić transform origin
tutaj dać 0% na linii y x
i 50% na linii y na osi y okej
i teraz jak widzisz przykrywam ten button moglibyśmy też go
ostylować żeby on się po prostu przesuwał razem z tym ale już nie będziemy kombinować tutaj
możemy ewentualnie
dodać display block żeby nam ten button poleciał na dół okej
jak widzisz nie dochodzi do rerenderu naszego
komponentu i teraz ta animacja jest zgodna jakby z
dobrymi praktykami ponieważ robimy animacje po transformie a nie po width
więc cofam nie rób nigdy animacji po width po top po left rób
transition i transform czyli transform translate transform
scale x możesz też animować opacity a to taka tylko krótka
lekcja z performance animacji w css w każdym
razie tak właśnie to wygląda tak wyglądają refy w praktyce a
w następnej lekcji pokażę ci właśnie nieco bardziej zaawansowany sposób i jak
zintegrować w ogóle refy z jakąś zewnętrzną biblioteką