69 - React JS - High Order Component (hoc)

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
HOC это:
High Order Component
Компонент Высшего Порядка
Функция, которая на входе в параметрах принимает компонент, а на выходе возвращает новый компонент - контейнерный компонент для переданного в параметрах компонента.
HOC позволяет нам применять какое-то поведение к разным компонентам, не дублируя код.
Иначе: HOC позволяет нам создавать однотипные контейнерные компоненты для разных целевых компонент. А задача контейнерной компоненты - дать целевой презентационной компоненте какие-то данные\поведение.
Из популярных всех известных HOC-ов мы с вами уже знаем connect и withRouter
Правда connect - не совсем HOC если совсем придраться уже: connect после первого вызова вернёт нам HOC. И мы его уже вызываем второй раз.
А сама функция connect не может быть хоком, так как она принимает mapStateToProps и mapDispatchToProps, а настоящий HOC должен принимать в параметрах КОМПОНЕНТ.
Вот такие пироги!!! Летим, самураи!
Летим, самураи ;)
Уроки по React JS: • Курс "React JS - путь ...
Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#hoc #HighOrderComponent #КомпонентВысшегоПорядка #reactjs #практика #примеры #уроки #курс

[@DmitryJT50]

"смерть Кощеева - на конце иглы, та игла в яйце, то яйцо в утке, та утка в зайце, тот заяц в сундуке, а сундук стоит на высоком дубу" Мне кажется, Кощей что-то знает про React....

[@ses33320022002]

😁

[@ПетроПотрошенко]

Или разработчики реакта русские сказки и матрёшки любят :)

[@ivank.1193]

понял что повзрослел, когда начал пересматривать некоторые выпуски

[@ЮлияКотлярова-ю8л]

"Дублировать код это гавнокодить, Оторвать тебе руку, Ты - больше не самурай!" (с) Димыч

[@__maxsoul643]

Спасибо за урок. Лично для меня показалось сложнее, чем redux-thunk

[@MellRokk]

симметрично!

[@СтаниславСкоробогатов-п2ч]

High Order Component (hoc) - вынос мозга !

[@Canaillee]

Колоссальный объем за месяц я тут просмотрел, конечно, параллельно было бы попроще учить, наверное, с документацией, тренировкой и так далее. Но не терпится прям просмотреть все и догнать! И это лучшее, что я нашел по реакту, Димыч красава! Я Вас догоню!

[@indigosay]

за кем гонитесь-то? За знаниями или за другими людьми?)

[@oleksandr_h]

этот курс зе бест

[@ainz8656]

@@oleksandr_h спешу тебя огорчить , курс устарел как синтаксически , так и концептуально.Вот 2.0 хорош

[@oleksandr_h]

@@ainz8656 к 2.0 плавно приближаемся )

[@Medulla_oblongata01]

ну что устроился?

[@kenanhaciyev3759]

если этот человек перезапишеет путь саммурая с современным стеком - однозначно он будет самым знаменитым в этой сфере в руссом сегменте)

[@АртёмРусалеев-ж2ь]

офигенно уроки становится проще

[@andreiribac6284]

Субботний вечер - 31.07.2021. Время 22:44, а я не бритый, не мытый, в жару осваиваю HOC-и! Всем удачи, Димычу спасибо!

[@ruslanfomin4648]

аналогично, мужик) пусть и говорят, что 1.0 уже устарел, хочу его пройти, всё усвоить и приступить к 2.0

[@mediontamginskii5889]

Да мужик! Лучше быть не мытым, не бритым и пахнущим мужиком который знает react HOC чем наоборот!!!))))

[@stanislavrud2306]

До этого слышал, что дальше будет проще.... но этот урок совсем взорал мне мозг....

[@Snegurjan]

8:33 на рисунке мои глаза, когда я пытаюсь понять трудную тему 😂

[@drdev_blog]

как же круто понимая теорию перед кодингом Димыча писать код и потом сверять, настоящая камасутра 🚀🚀🧑🏻‍💻🧑🏻‍💻

[@АндрейФилимончик-ю9у]

High Order Component (hoc) Все круто, летим дальше!)))

[@АлександрАлександрович-л3х]

А-а-а! Для ProfileContainer вообще длиннющая запись получилась: export default withRouter(HOCRedirectToLogin(connect(mapStateToProps, mapDispatchToProps )(ProfileContainer))) Ёпрст! Работает!)) Класс!))

[@artemmazhulin765]

то чувство, когда redux-thunk & hoc заходят намного лучше, чем постраничный вывод и button disabled)

[@ВладиславБирюков-ш5э]

промисы посложней всего этого, просто нужно не торопиться, я понял урок с disabled и постраничным с первого раза. Что бы не запутаться в этом всем, просто иногда нужно облокотиться на кресло и в тишине задуматься о этом коде, который там написан, в голове все промотать, возможно полежать, переварить, я лично беру спинер, смотрю на него и собираю все в голове, помогает сосредоточиться, я это запомнил и могу смело использовать в будущем.

[@АлександрБульдоз]

Hoc!! Спасибо Димыч, ты крутой 👍🏻👍🏻👍🏻

[@ОлегЄрмаченко]

Вы знаете что такое боль? Это когда ты 45 минут ищешь ошибку которой не существует, просто localhost подвис... Искал искал, плюнул, всё закрыл , посмотрел фильм. Думаю надо всё таки разобраться с hoc, запускаю IDE , стартую localhost, а оно работает ...

[@MegaVaNushka]

хоки - изян! Благодаря тебе, Димыч :)

[@ВладиславШевель-м4к]

Like! НЕсложно , понятно, но запутанно с точки зрения, сегодня написал, а завтра уже забыл , что написал ) А то и через час уже можно будет запутаться в количестве оберток и контейнеров )

[@AlenaHrudavenka]

Дошла до середины четверга и до этого выпуска... Думаю что время затраченное на запись роликов фигня в сравнении со временем, которое затрачено на продумывание того, что и на каком этапе разложить по полочкам, как донести и когда народ созрел для новых знаний. Спасибо!

[@lvan_lvanov]

привет, ты устроилась?

[@yuritian8830]

У меня нет подходящих матов чтобы выразить благодарность и восхищение! Конечно, я только к 60-му видео начал понимать подачу материала. Но блин...оно этого стоит! 30.06.2023 -> #React-#Redux

[@midnightstar_zoriana]

ты прошел весь курс? нашел работу?

[@yuritian8830]

@@midnightstar_zoriana ага)) два раза)) я наткнулся на такой феномен "выученная беспомощность". Понял, что по меньше видео, по больше практики.

[@ihorshtohryn]

Дякую велике Дімич! Дуже інформативне відео!

[@abyrvalgfirst]

Спасибо! Главное всегда успевать поставить лайк до того как взорвётся мозг и разлетится по комнате.

[@ВиталийЮхник]

Hoc , High Order Component, best lessons

[@СтаниславСеменов-щ1п]

Connect в Connect-e одна из сложных тем восприятия и визуализации всего в сознании... Реально можно разорвать голову! Особенно, когда до рефакторинга пытался что-то свое замутить в Dialods на ранних этапах(типа зайдя в диалог заходишь в сообщения с этим диалогом)... Но, я думаю, надо сделать и топить дальше! Всем терпения, Самурайчики;)

[@max-ek5uu]

Взрыва мозга не произошло, все хорошо зашло, спасибо, всем успешно похукать, только не в туалете, а то вас не так понять могут

[@ОлегДолгов-т8и]

Всем привет! Для тех, кто запутался в 2022 или позже в ProfileContainer с обновлённым withRouter`ом вот пример кода как это в итоге должно выглядеть: =================================== let ComponentWithRouterProp = withRouter(ProfileContainer); let AuthRedirectComponent = withAuthRedirect(ComponentWithRouterProp); let mapStateToProps = (state) => ({ profile: state.profilePage.profile }); function withRouter(Component) { function ComponentWithRouterProp(props) { let location = useLocation(); let navigate = useNavigate(); let params = useParams(); return ( ); } return ComponentWithRouterProp; } export default connect(mapStateToProps, { getProfile })(AuthRedirectComponent); ======================================= Благодаря глюкам сервака полностью понял всю суть HOC`ов ))) Всю цепочку пришлось проходить раз 5, пока не понял, что сервер не отвечает) Димыч видимо так и задумал😂

[@SerhiiTsyhanok]

всё сработало , только не пойму в 2022 Redirect больше нету вместо него Navigate , вы ставили старую версию ?

[@ОлегДолгов-т8и]

@@SerhiiTsyhanok withAuthRedirect это HOC, внутри которого используется Navigate. Использую версию 18.2.0 React

[@naiz4005]

И тут я понял, что придется пересматривать) не понял все с первого раза, впервые за 69 видосов)

[@arsenypilipenko9013]

С начало все было понятно и просто, но в конце мозг нужно было напрячь, чтобы понять все эти вложенности) HOC - High Order Component!!

[@namedpacman1]

отличный материал про HOC

[@GameDi-rq5pn]

Дякую)

[@blgarOk]

- Будет легче, поверьте мне! © Димыч. Э неее, я на это больше не куплюсь. 😁

[@ДмитрийДмитриевич-ы2о]

Светлая тема редактора это жестко не привычно сматреть

[@ВикторКысса-я8х]

Тема про High Order Component зашла !) Как всегда очень понятно объяснил что такое HOC

[@SpL1NeR_1]

Сначала не понял, а потом как понял (HOC = огонь)

[@НиколайРумянцев-д5у]

Димыч, большое спасибо! Твое видео помогло решить проблему с HOC, которая казалась не решаемой. Огромный респект!

[@eugene-dmitrievich]

Спасибо за урок! HOC high-order component

[@ВладиславаВолкова-и7ы]

Пересматриваю видео второй раз. Пока это самая сложная тема за 70 выпусков для меня.

[@bugaga8144]

Понял, что мозг будет еще часто взрываться!

[@midnightstar_zoriana]

27:42 как раз идеально понятно - скобки, внутри еще скобки.. Спасибо, Димыч!

[@ДенКондрашов-я6х]

High Order Component в теории просто, а на практике взрыв мозга, пересматривать раза 2 минимум

[@sharkman6434]

hoc react ппц жара пошла ;)

[@ЯнКарпов-з8ю]

Спасибо Димыч за крутые видосы!

[@mistrz7856]

High Order Component (hoc), круто очень, бомбим дальше!

[@ruslanla4654]

HOC - Hight Order Component React Redux, Димыч ничего этого не знал да первого урока пути Самурая))) зато теперь знаю

[@MaxKievSky]

Сегодня 4я неделя моего пребывания джуном. Все супер, есть пару менторов, все очень сложно и абсолютно не так как на курсках, уроках, но твои видосы, Димыч, приблизительно показывают что происходит в проектах, и это очень хорошо. hoc. hook, husky - c этим всем знакомлюсь только только... но реально видосики помогают.

[@bigenough2122]

как ощущения?

[@MaxKievSky]

@@bigenough2122 Ну уже могу поспорить иногда с мидлами и даже с синьорами, качать надо хуки, тут сейчас никто из синьоров в них не синьор, и можно "учить" синьоров, получая от них какието взаимные плюшки в виде объяснений или лояльного отношения. Да и нет уже джунского мондаража при решении каких то тасок. чувствуешь себя более спокойнее.

[@bigenough2122]

@@MaxKievSky а до этого бекграунд был?

[@MaxKievSky]

@@bigenough2122 С разработкой почти нет, флеш, и небольшая корректировка скриптов по типу ActionScript, да и пару курсов прошел, но learn.javascript помогло еще разобраться с некоторыми вещами, там есть обсуждение читателей. их тоже нужно читать. Ну и книги. чем больше тем лучше.

[@bigenough2122]

@@MaxKievSky а реакт как учил, и как долго путь твой длился?)

[@olegthesheriff]

Привет из солнечной Алматы. Ты делаешь нас чуточку умнее. Спасибо тебе за это!

[@kirill_nezhnyy]

1,5 часа сидел, пердел на этих HOC'ах. Зато понял) Спасибо за очередной урок! Бомбим дальше!

[@frozeninside5004]

И вот с этого момента я начал пересматривать занятия по 2 раза ! 😅 Спасибо ! High Order Component

[@plotitsyn]

ТОП среди курсов по ReactJS. Легкое, по-семейному теплое, объяснение High Order Component. Лучшее введение в hoc.

[@mamkindotker]

Четкий HOC, половину урока делал опережая. Только слушая идею, правда не идеально, и не получилось по итогу самому, НО ошибки из-за которого не работал мой код были тупо в синтаксисе. Подсматривал и понимал что я дурак) Но Димыч крут я бы не когда не поверил что я смогу вот так что то делать наперед) Ну в целом проблемы в синтактических ошибках у меня были и в школе, сочинения за частую писал на 2/5 :D

[@olgaguseva7653]

Лучшее объяснение React JS - High Order Component (hoc)

[@ВладАкулинин]

написать одну строчку несколько раз - NO, сделать 1000 контейнерных компонент - YES!

[@__online7250]

HOC не знала ранее, но очень понравилась эта функция, так как она упрощает код и его понимание . И понравилось то, что контейнерная компонента отрисованная функцией HOC - относительно, временная #hoc​ #HighOrderComponent​ #КомпонентВысшегоПорядка​ #reactjs​ #практика​ #примеры​ #уроки​ #курс

[@TRIZ-Bogatyregold]

Мне ситуация с HOС или хоками, абсолютно понятна! Я ищу только умиротворения и вот этой гармонии! ЖДем compose из следующего выпуска, чтобы понять как сделать все это более удобочитаемым!

[@ervinabliamitov2149]

Спасибо! Мозг взорван, но мотивация не пропадает, за это огромный респект!

[@vladimirww5152]

Крутая штука, эти хоки в Реакте!

[@sophiet1694]

Отличный урок, с таким подробным объяснением становится совсем не сложно!! High Order Component!

[@АлексейЖумаев-у7б]

hoc - очередной взрыв, Димыч молодец!!!

[@GrourDenis]

После всего что пройдено воспринимается легче, React hoc зашло

[@andmak4795]

Очень крутой курс!

[@СергейДудкин-ъ1я]

Димыч привет! Взрыв мозга конечно был), но не масштабный)!! Уверенно прём-летим дальше!! Огромное спасибо!!!

[@СергейПолукаров-з6г]

Higher Order Component (HOC). Все классно!!

[@sergsergey4251]

hoc справа, hoc слева... концепция понятна, но обёрток, конечно, много... бомбим дальше ©

[@disposables72]

Первую часть про HOC понял, потом поплыл))) Буду возвращаться.

[@deGGenerate]

Круть, мне кажется с каждым выпуском я познаю как устроена вселенная

[@АлексейМелентьев-ч3в]

второй раз смотрю, уже сделал интернет магазин с редаксом, параллельно, но конец этого урока - у меня просто мозги вскипели

[@АлександрТыршу-р5с]

Блин Димыч я спать не могу пойти, так всё интересно. Ты просто как сенсей-самурай ведёшь меня через туман React и своей катаной расфигачиваешь эту пелену непонимая технологий. Спасибо... то есть Аригато!)

[@ВладиславаВолкова-и7ы]

Пересматривала это видео 4 раза и про compose 2 раза. Итог - написала свой хок withLoading 😎 Тема сложная, но очень крутая и нужная , спасибо!!!

[@serg11oz]

High Order Component (hoc) - хорошее объяснениевсе, Спасибо! Однозначно Like! Было понятно, но до момента второго оборачивания компоненты. Дальше стало вынос мозга - для понимания, нужно пересмотреть несколько раз )))

[@АндрейДарменко-й8щ]

HOC - это не взрыв мозга, а высокоскоростная карусель. К концу урока мозг сделал 1000 и 1 оборот вокруг своей оси, и послал меня, сказав: "Отвали, братан, меня укачало и я хочу вздремнуть". Но ничего. Загляну попозже в этот "Экстрим-камасутра-парк". React рулит!

[@ArtLokos]

HOC - high order component Эпизоды по 20-30 мин. это топчик. Не успеваешь устать от наплыва новой информации. Бомбим дальше

[@ЛусінеАтаджанян]

То чувство, когда redux-thunk взорвал мозг меньше, чем HOC. Но в любом случае это лучший курс по реакту. Не знаю, возможно ли найти настолько крутой бесплатный курс по React JS. Тут даже подтягивается нативный JavaScript

[@samkrekotyn]

React JS - High Order Component (hoc) Спасибо Димыч

[@yourbadapple]

Взрыв мозга! то чувство когда решил просмотреть санк и хоки в один день... Спасибо за видео!

[@ГалинаКузнецова-н1и]

очень понравилось изучение High Order Component (HOC)!!!

[@ronallik]

Hoc, high order component, redux, thunk, reacr js - летим дальше.

[@denff932]

коротко о hoc - я в восторге) . Про двойной connect конечно жутковато, но переварим, что делать

[@Димкинкоп]

High Order Component , все круто объяснил! Летим дальше!)))

[@SerhiiD11010]

Иногда чуствуется очень большое кол-во инфыб аж голова ватнеет. Пока не пересматривал какие то выпуски впринципе технологии понятны, могу сам их повторить на свежую голову :) Спасибо Димычу

[@АндрейВерещагин-т1ю]

Спасибо за уроки

[@marsonleonardovich4036]

High Order Component - best of the best)

[@RUS4HELP]

Смотрю и конспектирую - 25 апреля 2021 года!

[@MikhailKuklenkov]

Это тихий ужОс) Мозг вышел за пределы физического тела, Дима. Лайк поставил, мозг взорвался! Несмотря ни на что - летим дальше!

[@TatianaKlimenko]

Спасибо, Димыч! Супер-объяснение HOC - High Order Component. С каждым твоим уроком React становится ближе и понятнее.

[@АлексейЖуков-й6х]

Пытался понять эти HOCs, зачем и когда их использовать. Только на примере понял смысл HOC -ов и причину использования. Спасибо Димыч!

[@ДмитрийКибешев]

React JS - High Order Component (hoc) Спасибо, Димыч! Смотрю, учусь!

[@denpol9956]

Прикольная подача)

[@ivanmiarkulau8320]

Капуста!) Очень много HOC один поверх одного, везде по чуток наша презентационная компонента себе собирает из high order component и в итоге возвращается с обогащенными пропсами) Спасибо за урок!) React HOC

[@alexanonymous5823]

hoc взрывает мозг=)) спасибо большое!!!

[@ИльяАксаков]

Мозг взорвался!) Лайк!! hoc, high order component

[@egorepir]

Мозг не взорвался , но было интересно и понятно. Круто топим дальше Димыч. Успехов тебе и удачи!!!

[@AlexMedovnik]

Супер! Лучше всего - практиковать React в таком режиме + Learn.js по мере надобности!

[@evgeniytitovskiy2848]

Последовал совету Димыча и перед этим выпуском прочел докуминтейшн. В итоге, уже имея представление о High Order Component пришел смотреть видос! Можно сказать, Димыч, привел в порядок мои неотесанные знания о HOC. Спасибо!

[@alexandrgusletsov2567]

Димыч спасибо! До меня только что дошло : Сначала : Есть функции которые решают много задач Потом следующее видео : Давайте сократим код теперь ! Следующее видео: Давайте для сокращения напишем одну функцию! в конце : Не понятно? Сложно ? Есть ещё одна функция Потом заново по кругу , и так каждый раз когда функции накапливаются , мы придумывает код или функцию которая всё сокращает , но в начале всегда очень сложно, потом смотришь назад и становится легко то что было раньше а сложное опять впереди!

[@uzver3787]

Это однозначно сложнее чем thunk. Такие вложенности что просто выносит мозг. Воспроизвёл схематично эту кашу, осталось самому осмысленно набрать и внедрить hoc в social network Но, мы же любим изобретать велосипед, чтобы понять, что и зачем нужно? Надеюсь, что в следующем видео compose избавит от этой жести) и ТОГО: чтобы container не выполнял redirect,создаём hoc в отдельном файле для доступа к нему повсюду. В hoc передаём container,который закреплён за переменной, которая в withRouter цепляет url и withRouter закреплён за компонентой и передаётся в connect. В hoc свой mapToState для получения props внутрь class component и свой connect для передачи этого mapToProps внутрь классовой компоненты Redirect.Жееееесть!) Спасибо за уроки!!! Flying into space!:)

[@ГенаФес-ъ9з]

React JS - High Order Component (hoc) Огонь! Сложно, но интересно!!!

[@vadikpanchuk4978]

C HOC все норм. Классный урок.

[@Артем-ч7э9ъ]

Было трудно, но смысл понятен.. надеюсь глубокое понимание придет со временем!

[@konstantinkuksov914]

Смотрим, бомбим, пишем код.. Все круто крч!