Тёмный

Для чего нужен useContext в React, простым языком 

Дмитрий Герасимов - о разработке в сфере IT просто
Просмотров 14 тыс.
50% 1

Мой Telegram канал
t.me/way_of_developer
Все хуки в React простым языком: • Хуки React
В данном видео я хочу рассказать о том что такое контекст, для чего нужен хук useContext простыми словами и показать на примере, для чего используется этот хук. Вы научитесь использовать context и узнаете когда стоит его использовать.
Вы можете поддержать мой канал:
www.donationalerts.com/r/dmit...
donate.qiwi.com/payin/dmitrii...

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

 

12 ноя 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 69   
@user-vk1id6md6o
@user-vk1id6md6o 2 года назад
Из всего ютуба самое понятное объяснение, спасибо большое
@artful_alpha
@artful_alpha 2 года назад
объяснил просто за счёт того что... 1) На функциях а не на классах что правильно и проще для начинающих. 2) Передача в контексте не каких-то тяжёлых в понимании для новичка объектов, логикии либо дескруктуризации - а простой строки. 3) Наглядное представление в одном файле, потому как при объяснении для новичков очень тяжело держать имена и содержания абстракций( по типу объектов) и при этом открывать, создавать, называть другие файлы. А тут все в одном файле с говорящими за себя названиями. p.S. Я писал туда без контекста, но дока и остальные видосы это представляют так запутано, хотя по сути это глобальный пропс-компонент, в который нужно обернуть компонент которому нужен будет этот пропс на любом из уровней. Спасибо за лаконичное объяснение
@user-jw9jr4xu1d
@user-jw9jr4xu1d 2 месяца назад
Самое лучшее объяснение и не затянуто. Респект и уважуха!
@your_illusion5155
@your_illusion5155 Год назад
топовое объяснение, даже у Минина не так понятно что к чему - спасибо!
@nixnemo
@nixnemo 7 месяцев назад
Просто, понятно, лаконично. Автору огромное спасибо!
@junior_diary
@junior_diary Год назад
Крутой контент, твои уроки по хукам самые лаконичные из всех, что я нахожу на ютубе. Вначале смотрю популярных ютуберов, потом на тебя попадаюсь и у тебя более понятно получается, жаль что мало просмотров.
@__online7250
@__online7250 2 года назад
Круто, очень понятно объяснил, как и обещал! Спасибо))
@cen1aur
@cen1aur 2 месяца назад
Отличное видео, подписка и лайк!
@warwar-3
@warwar-3 2 года назад
Очень лаконично и просто объяснил! Спасибо! Лайк, подписка)
@racman9964
@racman9964 Год назад
спасибо за разборы! Очень понятно, быстро понимаешь что к чему
@mrhawking
@mrhawking 11 месяцев назад
наконец я поняла, на кой черт мы в CreateContext что-то передаем, спасибо!))
@user-dh5ji5qv1l
@user-dh5ji5qv1l 8 месяцев назад
Бро, твоя подача в разы лучше чем у WebDev, так держать!!!
@OTKA3
@OTKA3 8 месяцев назад
не сказал бы
@kirill_prog
@kirill_prog Год назад
Очень понятно. Спасибо! 👍
@user-jt3de7qu1c
@user-jt3de7qu1c 5 месяцев назад
Первое адекватное обьяснение. Я видосов 5 посмотрел, и только сейчас уже стало все понятно, спасибо
@user-nb1is5wc4k
@user-nb1is5wc4k Год назад
Спасибо! Достаточно доступно и понятно.
@tazorprod.934
@tazorprod.934 9 месяцев назад
Коротко и ясно. Однозначно лайк
@kseniiaazovtseva6139
@kseniiaazovtseva6139 7 месяцев назад
Наконец-то простое и понятное объяснение, спасибо большое)
@Bombilaz
@Bombilaz 2 года назад
Коротко и понятно , спасибо)
@MikhailKuklenkov
@MikhailKuklenkov Год назад
Класс, доходчиво объяснил!
@RewCSharp
@RewCSharp 5 месяцев назад
Спасибо за урок!
@Ivanesenses
@Ivanesenses 2 года назад
Спасибо, хорошее объяснение
@l_Chunga_l
@l_Chunga_l Год назад
Спапсибо за самое понятное объяснение!
@itsMatrik
@itsMatrik Год назад
Кратко и полезно.Спасибо :)
@admusmanov3009
@admusmanov3009 Год назад
очень доходчиво объяснил спасибо!!!
@dez1ess
@dez1ess Год назад
лучшее объяснение на всём ютубе. Лайк + Подписка
@user-py3lm1bh9f
@user-py3lm1bh9f Год назад
Спасибо большое, сразу стало понятно
@peterweyland117
@peterweyland117 11 месяцев назад
Спасибо 🙏
@osmancho3185
@osmancho3185 Год назад
очень ясно изъяснили спасибо
@maxshine-qf7qg
@maxshine-qf7qg Год назад
Как же ты хорош
@_SOMEONE_
@_SOMEONE_ Год назад
На фоне играет такая спокойная музыка, что я чуть не уснул) Просто я вчера уснул в 00:30 и проснулся в 6:30
@zdAxel
@zdAxel Год назад
Супер, пасиба
@morelifetv1041
@morelifetv1041 2 года назад
Блинн хоть кто-то нормально объяснил, спасибо. Лайк и подписка
@user-ps6hu8qs8z
@user-ps6hu8qs8z Год назад
Согласен
@NikOroferov
@NikOroferov Год назад
Комментарий приемлемой длины в благодарность за видео
@unknown.6914
@unknown.6914 6 месяцев назад
Посмотрел 5 видео по хуку useContext, бесспорно это видео вне конкуренции (мое личное мнение). Огромное спасибо автору!
@user-ly4qk5do4n
@user-ly4qk5do4n 6 месяцев назад
спасибо!
@Denis-di6hc
@Denis-di6hc Год назад
талант
@user-sp8ty2ol8m
@user-sp8ty2ol8m 4 месяца назад
походу нашёл золотой канал
@farrukhx7143
@farrukhx7143 Год назад
Отличная подача! Когда уже освоился с передачей и фокусами над пропсами, со временем надоедает их каждый раз прокидывать через 10500+ компонентов. Решил замахнуться на редакс, но что-то особо не пошло, многовато кода ради кода там. Вспомнил про useContext, по практикуюсь на нем пока, ну и ознакомлюсь с твоим плейлистом по mobx)
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Попробуйте redux в связке с redux-tookit, это исправление проблемы связанной с избыточным написанием кода, которая уже стала стандартом.
@farrukhx7143
@farrukhx7143 Год назад
@@dmitrii_gerasimov пробовал, чуть проще, но все равно кажется на мудрено. Но вернутся стоит, чтобы еще раз разобрать
@evgenym.2137
@evgenym.2137 Год назад
Отличное объяснение. Ещё бы шрифт в VS Code сделать покрупнее для восприятия)
@bashkort_erete
@bashkort_erete Год назад
согласен, а то как бастрыкин через лупу смотреть надо
@evgenya_pan
@evgenya_pan Год назад
Замечательное видео, одно из самых понятных из поиска на ютубе. Спасибо за ваш труд! Только делайте шрифт покрупнее, пожалуйста)
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
В новых видео делаю шрифт крупнее.
@rubicund
@rubicund Год назад
Спасибо. Очень простое и годное объяснение. Только я спешун еще тот. Не досмотрев ролик до конца, уже пошёл искать, зачем нужно было передавать бесполезную строку, при вызове функции createContext.
@user-ux7cj9rc2b
@user-ux7cj9rc2b Год назад
данные в провайдер можно запихать только на верхнем уровне? добавить еще на уровне ниже никак?
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Да, конечно на любом, просто используйте "setContext": const [context, setContext] = useContext(Context);
@kindaart7451
@kindaart7451 Год назад
Спасибо большое за контент! Я правильно понял, что без провайдера, стейт становится глобальным? Какой в этом минус?
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Без провайдера вообще не будет работать. Он же передаёт данные в компоненты.
@kindaart7451
@kindaart7451 Год назад
@@dmitrii_gerasimov В данном моменте, на 5:06, при закомментированном провайдере, выводится значение, заданное в скобках createContext
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Так в этом случае выводится не содержимое контекста, а заглушка.
@zakiro4277
@zakiro4277 2 года назад
спасибо за урок только шрифт маленький, на нетбуке плохо видно
@user-hr9kc1vw3m
@user-hr9kc1vw3m 11 месяцев назад
Необходимо увеличить шрифт
@black_light
@black_light Год назад
Если нужно передать данные из одного компонента в другой - контекст подходит?
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Да, вполне.
@true227
@true227 10 месяцев назад
Можете объяснить для чего useContextиспользуется на практике, в реальной работе? Не вижу смысла его использования при наличии стейт менеджера, например редакс, если же стейт менеджер отсутствует, то юзконтекст получается его аналогом
@dmitrii_gerasimov
@dmitrii_gerasimov 10 месяцев назад
1. Например, чтобы сократить число библиотек. 2. У Вас большая вложенность и при отправке данных с помощью props может возникнуть ситуация, что куча свойств попадает в компоненты, но в них никак не используется. По сути, получаем, чтобы только отдать дальше. 3. Ну и никто не отменял личные предпочтения.
@Zreus-ry9el
@Zreus-ry9el 8 месяцев назад
Это альтернатива redux или не совсем? В каких случаях использовать redux, а в каких context? Предполагаю, что выбор зависит от масштаба проекта, но в чем преимущества конкретной технологии?
@user-tx3jv1zk4y
@user-tx3jv1zk4y 8 месяцев назад
Про масштаб вы написали верно. Отмечу еще несколько пунктов из личного опыта. 1. Соглашение на проекте. Стор если значение используется во многих иерархически независимых местах. Контекст для местных значений которые не используются после размонтирования конкретной страницы/компонента (не нужно специально чистить редьсер и приводить к первоначальному значению) 2. Стор плохо подходит для часто изменяющихся значений (отрисовка графиков реалтайме с частотой в 20мс, таймлайн для видео) Тут лучше контекст с useRef 3. Если вы хотите запихнуть в контекст значение и функцию его изменяющую, что часто делают, то это будет плохой идеей. Потому что, без доп. ухищрений, при изменении значения будут обновляться компоненты с функцией а не только значением 4. В большом проекте у вас очень много зависимостей кода и это приводит к проблемам. Вы думаете что контекст авторизации всегда будет верхним, но это может изменится и через пол года он будет взаимно связан с контекстом оплаты Есть еще много нюансов, но сходу не вспомнить
@Zreus-ry9el
@Zreus-ry9el 8 месяцев назад
@@user-tx3jv1zk4y спасибо!)
@vladivostok5010
@vladivostok5010 Год назад
Всё хорошо, но в мире ещё очень много людей кто может себе позволить только HD экран или смотрит в отдельном окне и ничего не видно. Пожалуйста побольше шрифт.
@dmitry9463
@dmitry9463 4 месяца назад
Когда лучше использовать useContext, а когда useReducer?
@dmitrii_gerasimov
@dmitrii_gerasimov 4 месяца назад
Зависит от ваших предпочтений. Это просто разные подходы к одному и тому же. Но часто контекст используют для каких-то библиотек, как например react-redux.
@druf5962
@druf5962 Год назад
вверх контекст нельзя передавать? только спускать вниз сквозь children?
@dmitrii_gerasimov
@dmitrii_gerasimov Год назад
Нельзя, но ничто не мешает использовать его в самом верхнем компоненте. Обычно так и делают.
@legoghetto2689
@legoghetto2689 2 месяца назад
Сходи к логопеду.
Далее
React 17: Хук useContext
18:31
Просмотров 11 тыс.
The Hardest Challenge!
00:37
Просмотров 12 млн
The tactic worked 😂#shorts by  Leisi Show
00:26
Просмотров 3,8 млн
Learn React Hooks: useContext - Simply Explained!
15:46
React JS #15 Контекст (React Context)
11:00
Просмотров 28 тыс.
ПОЛНОЦЕННЫЙ ГАЙД ПО REACT CONTEXT
35:45
44 - React JS Практика - Context API
43:18
Просмотров 108 тыс.
#3: React Hooks - useRef
27:52
Просмотров 64 тыс.
React 16: Хук useReducer
17:25
Просмотров 8 тыс.
The Hardest Challenge!
00:37
Просмотров 12 млн