React: Wprowadzenie do Higher Order Component

16.8.x

0:00Cześć, w ostatniej lekcji stworzyliśmy sobie logikę, która pozwala nam na tworzenie

0:04props'a podawanego. Cześć,

0:09w ostatniej lekcji stworzyliśmy sobie logikę, która pozwala nam na tworzenie state

0:13w zależności od tego w jakim root'ie się znajdujemy. Cześć,

0:19w ostatniej lekcji stworzyliśmy sobie logikę, która pozwala nam na zmianę naszego state'u na

0:23podstawie ścieżki, na której obecnie się znajdujemy i dzięki temu, że ta

0:27ścieżka zawiera taką samą nazwę jak nasz props, który podawaliśmy w kilkunastu

0:31miejscach w naszej aplikacji, czyli Page Type albo Card Type

0:35twitters, articles, notes to były takie trzy typy, które zawsze gdzieś podawaliśmy. To

0:40teraz możemy zrobić sobie z tego takie Single Source of Truth, czyli takie jedyne

0:44źródło prawdy i opleść to w context, który następnie podamy

0:49do naszej aplikacji i teraz, żeby przypomnieć

0:53sobie jak to działało to conext stworzymy sobie w osobnym pliku, tak żebyśmy

0:57mogli go importować i eksportować, więc może stwórzmy sobie po prostu w

1:01SRC folder context, w którym

1:06zrobimy sobie index js i to w nim

1:10zaimportujemy sobie React'a, a następnie

1:15stworzymy page context i stworzymy context,

1:24w którym podany jako domyślny props, jako domyślny context

1:29właściwie notes. Niech to będzie taki domyślny context,

1:33który zawsze będzie podawany w razie gdyby nic tam w nim jeszcze nie było. Wyeksportujemy

1:42sobie to, zaimportujemy go sobie do naszego main

1:46template, a, on musi się nazywać page context,

1:57wielką literą, ponieważ on będzie w JSX'ie jako komponent

2:01podany i teraz

2:06otworzymy sobie tutaj page context provider. Jako value

2:23podamy mu this state page type, tylko

2:27sobie to zdestrukturyzujemy tutaj, page type this state.

2:31Okej, możemy to podać w tym miejscu

2:35i w tym momencie, jeśli dobrze to podaliśmy to w jakimkolwiek

2:39miejscu w naszej aplikacji, jeśli nie dostaniemy się do tego context'u

2:44to będziemy mogli właśnie podejrzeć sobie co tutaj się w nim znajduje i na

2:48podstawie tego context'u tworzyć nasze komponenty, ale

3:00w poprzedniej lekcji pojawiła się taka metoda jak with router, którą

3:04chciałbym ci nieco szerzej opowiedzieć, a właściwie opowiedzieć o kontekście

3:08w którym ona została użyta. Ponieważ ona wykorzystuje

3:13taki pattern, który nazywa się High Order Components. Jest to po prostu funkcja,

3:17która zwraca komponent, ta funkcja wzbogaca w jakiś sposób komponent,

3:22który eksportujemy tutaj, więc jeśli oplatamy

3:26sobie main template with router, to ten with router wzbogaca nasz main template

3:31o takie rzeczy jak na przykład właśnie location path name i

3:35oczywiście

3:42to jest taki gotowy Higher Order Component, ale możemy napisać właśnie swój

3:46i teraz to zrobimy. Dlaczego to zrobimy? Już tłumaczę. Bo na

3:50przykład, jeśli jesteśmy sobie tutaj, na

3:58przykład jeśli wejdziemy sobie do naszego, bo

4:16na przykład jeśli wejdziemy sobie na naszego grid template i mamy

4:21tutaj page type, to nawet jeśli pozbędziemy się go z tego miejsca czy

4:25nie będziemy go podawać jako props, a chcielibyśmy go wyciągnąć

4:29z naszego context'u, to musielibyśmy tutaj zaimportować

4:33context, stworzyć page context w taki sposób, otworzyć

4:39jak ja to mówię portal do naszego context'u,

4:44w taki sposób, podając context i dopiero zwracając cały nasz JSX,

4:48który zawiera, który zawarty był w tym componencie

4:53i jeśli to miałoby się zdarzyć tylko w jednym componencie to to nie

4:57byłby problem. Problem polega na tym, że musielibyśmy tak napisać kilkanaście

5:01komponentów albo przynajmniej kilka w naszej aplikacji i byłoby to bardzo uciążliwe

5:05i ten kod by się powtarzał i zamiast powtarzać ten kod możemy po prostu

5:09stworzyć taki provider, który po dodaniu

5:14w tym miejscu pozwoli na dostęp do tego props'a, po prostu

5:18bez pisania dodatkowego kodu w naszym JSX'ie. To wygląda trochę jak magia, ale

5:22jest naprawdę fajne i też ten przykład który teraz Ci podam, wydaje mi się, że po

5:26prostu fajnie tłumaczy na czym polegają Higher Order Components, bo nie ukrywam,

5:30że ja na przykład zawsze miałem problem z tym żeby to zrozumieć z tego właśnie względu,

5:34że te przykłady zazwyczaj były takie dość skomplikowane, a zaczynanie

5:38od prostych przykładów jest moją mocną stroną, więc teraz pokażę

5:42ci jak to zrobić. W naszym folderze SRC stwórzmy

5:46sobie folder hots, jak Higher Order

5:50Components i w nim stworzymy sobie plik with context

6:01js i

6:06zaraz

6:19zobaczysz, że taki Higher Order Component nie różni się specjalnie od

6:23takiego zwykłego React'owego komponentu. Różnica jest tylko taka,

6:27że podobnie jak na przykład Higher Order Functions w JavaScript'ie, komponenty

6:32te zwracają komponenty, więc mamy jakby komponent w komponencie, funkcję

6:36w funkcji. Zaraz pokażę ci jak to wygląda, zaimportujemy sobie React'a, zaimportujemy

6:44sobie nasz context, jak

6:50zwykle zrobiłem błąd page context i teraz

6:56tworzymy tai Higher Order Component, w taki sposób, że tworzymy sobie const'a with

7:00context, with jest tutaj taką nazwą, konwencja nazewniczą,

7:04można powiedzieć i każdy Higer Order Component właśnie zaczyna się od with, z małej

7:08litery, więc to jest funkcja, która przyjmuje komponent i ta

7:29funkcja z racji, że ten komponent jeszcze przyjmuje jakieś props'y, które

7:34po wywołaniu też właśnie trzeba mu podać, ta funkcja musi zwrócić nam

7:38kolejną funkcję i tutaj użyjemy

7:42sobie starej składni. Nazwiemy to context component

7:48i w

7:53nim podamy props'y, które ten komponent będzie jeszcze zawierał i w

8:00jaki sposób możemy zwrócić sobie w końcu nasz JSX

8:06w takiej postaci, że mamy tutaj page context consumer. Odpalamy

8:16sobie wrota naszego kontekstu, podajemy kontekst w taki sposób. Podajemy nasz

8:32komponent, podajemy

8:37mu wszystkie props'y jakie on tylko tam dostaje, żeby one nie zginęły i dodatkowo

8:41podajemy kontekst jako

8:45osobny props i teraz jeśli wszystko dobrze zrobiłem i wejdę

8:49sobie na przykład do grid template, zaimportuje sobie with context i opakuje

8:58mój grid template, mój nowo utworzony Higher Order Component, a

9:02dodatkowo zdestrukturyzuje sobie kontekst jako

9:10nowy props, którym mu podałem, to

9:19już widzę, że popełniłem błąd, bo nie wyeksportowałem sobie mojego Higher Order Component,

9:24Export Default  with context. Teraz

9:29powinno działać, okej. Wejdźmy sobie do naszych

9:35dev tools'ów. Znajdźmy

9:41grid template i jak

9:45widzisz cpntext został podany, mamy tutaj notes. Jeśli

9:49wejdę sobie do twitters, to context zawiera twitters,

9:57więc nasz context działa, nasz Higher Order Component działa. Teraz

10:02jedyne co musimy zrobić to zrefakturować resztę naszej aplikacji, tak

10:06żeby nasz kontekst mógł podawać właśnie ten page type,

10:11ten props page type do naszych

10:15komponentów. A to zrobimy na szybko w następnej lekcji.