69 - React JS - High Order Component (hoc)

Подписаться 182 тыс.

Просмотров 67 тыс.

50% 1

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
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
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#hoc #HighOrderComponent #КомпонентВысшегоПорядка #reactjs #практика #примеры #уроки #курс

Опубликовано:

17 июн 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 880

@DmitryJT50 3 года назад

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

@ses33320022002 2 года назад

😁

@user-nw3nt9kq6m 2 года назад

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

@ivank.1193 4 года назад

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

@user-kc2dp3cf7y 3 года назад

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

@Snegurjan 3 года назад

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

@Canaillee 4 года назад

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

@indigosay 3 года назад

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

@oleksandr_h 3 года назад

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

@ainz8656 3 года назад

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

@oleksandr_h 3 года назад

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

@Medulla_oblongata01 2 года назад

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

@andreiribac6284 2 года назад

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

@ruslanfomin4648 2 года назад

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

@mediontamginskii5889 2 года назад

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

@arsenypilipenko9013 4 года назад

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

@__maxsoul643 4 года назад

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

@MellRokk 4 года назад

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

@kenanhaciyev3759 8 месяцев назад

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

@KanalReal 8 месяцев назад

а смысл, синтаксис в пакетах меняется чаще, чем выходят гаджеты от сяоми))

@user-fs4sl5my1o 5 лет назад

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

@user-nk6ih7uh1h 3 года назад

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

@user-qs7ij8df4q 3 года назад

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

@yuritian8830 Год назад

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

@midnightstar_zoriana 6 месяцев назад

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

@yuritian8830 6 месяцев назад

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

@user-br1tu9xh4w 2 года назад

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

@lvan_lvanov Год назад

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

@drdev_blog 7 месяцев назад

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

@user-lj8xm1ye7q 3 года назад

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

@user-oo3vu6zl8m 3 года назад

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

@user-nk1tz2xm3f 3 года назад

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

@user-yd2dk4ti4s Год назад

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

@blgarOk 3 года назад

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

@GameDi-rq5pn 5 месяцев назад

Дякую)

@artemmazhulin765 3 года назад

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

@user-jw1pc9ls1x 3 года назад

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

@user-lm2eb1jt8k 3 года назад

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

@ihorshtohryn 2 года назад

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

@TatianaKlimenko 4 года назад

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

@user-bx7rm2rp9g 5 месяцев назад

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

@Abdul-hy4cy 2 года назад

Очень интересно. Спасибо тебе Димыч, за то что ты сделал для нас !!!

@hennadiipetrov1967 4 года назад

ДА, не легко, надо второй раз смотреть)) спасибо, Димыч!

@spacerider9426 3 года назад

Спасибо огромное за твой труд! Смотрю дальше!

@shustrik911 4 года назад

High Order Component (hoc)!! Круто, спасибо за видос!

@blogsylar 3 года назад

25 ноября 2020 в 17.00 - 100.000 подписчиков! Поздравляю, Димыч!

@unit2009 3 года назад

Спасибо за видео! Пересматривал когда столкнулся с HOC на собственном проекте, и во всем разобрался😁

@kirill_nezhnyy 4 года назад

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

@MaxKievSky 4 года назад

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

@bigenough2122 4 года назад

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

@MaxKievSky 4 года назад

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

@bigenough2122 4 года назад

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

@MaxKievSky 4 года назад

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

@bigenough2122 4 года назад

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

@user-dc1cr5ny3q 4 года назад

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

@TheAzovStar 4 года назад

Зашло! Смотрел с перерывом. Восхищаюсь и получаю кайф от такой подачи материала! hoc High Ordered Components explanation

@ivansamoiliuk5451 4 года назад

Ух! Придется еще пару раз пересмотреть эти хоки/hoc/high order components.

@user-tf1rn7qq2p 3 года назад

Большое реактивное спасибо, Димыч! High Order Component (hoc)

@alexanonymous5823 3 года назад

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

@eugene-dmitrievich 6 месяцев назад

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

@buyshark3838 4 года назад

hoc higher-order-component in react great lesson thank you very much react is awesome couldn`t wait to finish the first part and start more difficult second part of this brillian crazy react-js course

@marsonleonardovich4036 4 года назад

High Order Component - best of the best)

@frozeninside5004 3 года назад

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

@naiz4005 2 года назад

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

@user-kd6og7gi5h 3 года назад

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

@MrZorg23 4 года назад

Спасибо! High Order Component (hoc) - очень полезная штука!

@ervinabliamitov2149 4 года назад

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

@miroslavtoikin 4 года назад

Лучшее объяснение темы HOC (High Order Component)!

@user-iz7fk4eu5t 3 года назад

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

@stanislavrud2306 3 года назад

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

@sandorkligan2208 Год назад

Лучшие курсы, спасибо Димыч! React JS High Order Component

@nachalponimat 4 года назад

Большая благодарность за уроки! (High Order Component)

@user-px2nk7xt9w 4 года назад

Очень детально все объяснил, как обычно в принципе) некоторые моменты про High Order Component пришлось пересматривать по несколько раз) в целом - спасибо)

@user-on9ul4zx6n 3 года назад

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

@user-bl4dl9ke7b 2 года назад

Спасибо большое! HOC круто разобран. High Order Component.

@user-sx4nw8ox5o 2 года назад

Nice job , thx Dimasta! HOC , Redirect, classComponent ,block UI, login.

@user-ue4hy9so3l 2 года назад

Ваше видео наверно 4-е которое я посмотрел по hok. И только теперь понял то что не понимал ранее. А еще рисуночки пондравились. С ними прям на много понятней. Еще раз благодарю

@TRIZ-Bogatyregold Год назад

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

@adolphin01 4 года назад

React JS - High Order Component (hoc) спасибо за выпуск

@denisb1899 4 года назад

HOC (Hide order companent) Отлично видео, Спасибо Димыч!

@harmony-ai-world 2 года назад

High Order Component (hoc) - спасибо за урок!

@Mykhailo_Vdovychenko 3 года назад

Мозг взорвался, но как же было интересно! Спасибо за такой крутой курс =)

@olegthesheriff 3 года назад

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

@MegaVaNushka 2 года назад

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

@vvsl3882 4 года назад

Как всегда на высоте!

@user-fy2gq8ev2b 3 года назад

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

@sergeyistominov5880 2 года назад

hoc шикарен, плюсик для лучшего ранжирования! =)

@user-im8le2mi2w 2 года назад

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

@lelkamod 4 года назад

HOC high order component Очень понятно и доступно. Димыч, спасибо)

@sophiet1694 3 года назад

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

@onGrill 3 года назад

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

@serg11oz 4 года назад

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

@user-di9dd7bb4l 4 года назад

React JS High Order Component (hoc) Спасибо за урок

@AY-rf3ku 4 года назад

Вроде понятно, спасибо за видео!:) HOC High Order Component

@user-vj8hj9jk2b 2 года назад

Тема усвоена - HOK реализован. Спасибо лектору )

@alexandr9313 4 года назад

hoc hoc hoc Огонь! Димыч, спасибо!

@tanyatritelnitskaya1911 3 года назад

React, HOC, high order component!!!!! Дима, спасибо!!

@ArtLokos 4 года назад

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

@deGGenerate 2 года назад

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

@mistrz7856 3 года назад

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

@abyrvalgfirst 3 года назад

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

@Smash69ful 4 года назад

Отличный урок. React JS - High Order Component (hoc)

@egorn6543 4 года назад

Долго ждал hoc

@annabolbot1228 2 года назад

cпасибо за подробные уроки hoc

@wild_wizards 2 года назад

Лайк! Хок отличная тема, все получилось едем дальше.

@disposables72 4 года назад

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

@user-pc9bl7uf1l 3 года назад

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

@user-gh4wz5eb4b 3 года назад

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

@user-bd4lw9hx3s 3 года назад

Удивительно, как такие сложные темы Дмитрий объясняет так понятно! Конечно, все благодаря базе, данной нам в предыдущих выпусках! Горжусь собой, однако, понимаю, что почти все это благодаря Дмитрию! Прекрасный курс по React - Redux! IT-KAMASUTRA мой любимый канал по программированию!

@maksb3534 3 года назад

Просто взрыв мозга! Но мы идем дальше! Димыч, огромный тебе респект за проделанную работу! дойду до 100 урока и начну пересматривать этот сериал 😅 займусь шлифовкой так сказать!

@user-pb3yt3bo9u 4 года назад

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

@user-wj6ue7nt5g 3 года назад

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

@user-pv5is5pz4j 4 года назад

Спасибо за урок! High Order Component (hoc)

@user-hg6im5cg2i Год назад

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

@user-lc6gy2ev5r 3 года назад

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

@cththes9340 2 года назад

Димычу респект, вынес мне мозг сегодня.

@__online7250 3 года назад

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

@miguelgrushetckii4839 3 года назад

Крутяк! такие вещи сильно помогут поддерживать код в будущем) нежели пилить сои костыли, лучше общепринятым разделением ответственности! Ты крут, Димыч! HOC, high order component, react, redux