Компоненты высшего порядка ReactJS (Higher-order components)

#React #ReactJS
Паттерн Компонент высшего порядка назван по аналогии с функциями высшего порядка. Функция высшего порядка - это функция, которая либо принимает функцию как аргумент, либо возвращает функцию как результат. И то же самое можно сделать с компонентами. Функция (Higher Order component, HOC) может принимать компонент в качестве аргумента, что-то с ним делать и возвращать модифицированный (каким-то образом улучшенный) компонент.
Рекомендую интересный канал о фронтенде
💡 t.me/frontendnoteschannel
Мы в соцсетях:
💻 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать: www.donationalerts.com/r/devm...
Курсы и плейлисты:
💡 Паттерны ReactJS: • 🏆 Паттерны ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Redux: • ☕️ Redux курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР ...
💡 Все о ReactJS: • 📘 ReactJS
💡 Tailwind: • 🍃 TailwindCSS курс
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 - Почему паттерн так называется
00:23 - Пример функции высшего порядка
01:28 - Еще один примеры функции высшего порядка
02:47 - Пример компонента высшего порядка для семейства компонентов
09:16 - Рекомендации по именованию HOC'ов
09:27 - displayName и дебаггинг
10:49 - displayName и ошибки в консоли
11:09 - Мысли про компоненты высшего порядка
#devmagazine #devmagazinechannel

[@DevMagazineChannel]

Примеры использования НОС 👉 th-cam.com/video/-BEScdDLudw/w-d-xo.html
Еще больше паттернов 👉 th-cam.com/play/PLmfIBo6rTVR7vVeFBPV3YrsXwk8wDbihw.html

[@user-sd9je7ov8o]

Хорошо раскрыта тема, с примерами - супер! Спасибо.

[@tonymonttana7]

Спасибо за пример. Но в следующий раз не закрытый пол блокнота браузером!

[@user-qp5jd6np6m]

Лучшее объяснение на всем ютюбе, много видосов посмотрел , только у тебя понял. Красава, спасибо!

[@user-cs7ex6vx9u]

Спасибо за классные примеры)

[@Ramosok]

Блин Супер, спасибо!!! в одном видео 2 ответа на свои вопросы получил.

[@dirty_arkady]

Если ролик обучающий, то почему пол кода не видно? что за привычка консоль выводить на пол экрана

[@jonny185]

Добрый день! Спасибо за урок. У меня вопрос что это за css вы используете? mb-0 и так далее

[@DevMagazineChannel]

Добрый день! Это bootstrap

[@fantast2568]

спасибо, react, reactJS, js

[@dmytroborgir8424]

Хорошо бы пример кода выкладывать на гитхаб

[@Svoboda2000]

можно было sidebar и броузер еще больше расскрыть а то код виден

[@TheMrFangame]

Урок хороший, но пример не совсем. По сути это оверинджениринг в примере. А конкретное использование HOC не раскрыто

[@kirill5675]

Что за сочетание клавиш на удаление символов слева-направо?

[@DevMagazineChannel]

Скорее всего просто клавиша Delete

[@user-mu2lr9zc7d]

где ты этому научился?

[@andTutin]

В документации

[@SiriScare]

Хорошо что рассказываете о паттернах, но объясняете плохо.
Название "Компоненты высшего порядка ReactJS" предполагает что тема о конкретной технологии React, а потом между делом выясняется что это не так. Вот чтоб прям с названия пытаться запутать новичков это уметь надо. Только в 3 раз был приведен пример использования в React, но непонятно - зачем это было сделано?
Здесь вместо того, чтобы стандартно отрисовать базовый элемент BaseNotification в расширенных контролах и передать ему параметры в props, мы сделали тоже самое, только параметры передали в виде аргументов функции. Чего мы этим достигли? В чем преимущество перед стандартным способом?