ПОЛНОЦЕННЫЙ ГАЙД ПО REACT CONTEXT
Вставка
- Опубліковано 5 лип 2024
- В данном видео мы поговорим про React Context. Рассмотрим, что это такое, когда его нужно использовать. Также дам рекомендации по использованию и оптимизации контекста.
Код из видео:
github.com/Ayub-Begimkulov/yo...
Telegram канал:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-00:51 - Интро.
00:51-03:00 - Что такое контекст?
03:00-05:21 - Смотрим пример без контекста.
05:21-09:17 - Понимаем, как можно использовать контекст.
09:17-13:49 - Мои рекомендации по использованию контекста.
13:49-16:23 - Использование контекста в классовых компонентах.
16:23-23:05 - Понимаем проблемы с контекстом.
23:05-35:15 - Оптимизируем рендеры.
35:15-35:44 - Заключение
Очень крутая подача информации, не перестану это повторять) спасибо 👍
Спасибо за фидбэк!
Спасибо за гайд и отличную подачу информации🙏
Рад помочь!
спасибо большое за полезный контент)
Рад помочь!
спасибо за контент
не за что!
Спасибо! Продолжай.
спасибо за фидбэк!
Полезно, спасибо
Рад помочь!
Спасибо! Под конец, где пишется свой стор, тяжко местами понимать, но оно понятно, около сеньорская тема раскрывается
А можешь раскрыть мысль? На каком моменте стало не понятно? Что можно было бы улучшить?
Тоже самое. На участке "оптимизируем рендеры" плыть начинаю
@@ayub_begimkulov дополню: неконтролируемая привычка крутить колёсико мыши и прыгать по коду сильно мешает смотреть и понимать происходящее.
Скорость подачи - не свойственная для Урока, но больше походит на Объяснение одного разработчика другому - вышестоящему - того, что ты сделал. Что-то вроде рабочего отчета на ревью. И в этом прям беда.
Привет, мог бы ты рассказать , как сам учишься и как в целом дошёл до уровня senior ?
Лайкос не глядя
Спасибо!
Ayub, сделай пж видео с примерами замыкания. Сложные примеры желательно.
Мб покажешь замыкание в реакт елементах.
Качество выросло, круто)
Спасибо за фидбэк! Записал себе в список.
@@ayub_begimkulov расскажи пожалуйста в данной теме, про замыкания и как они связаны с реакт волокном.
И хотелось бы увидеть хук useState в ванилла джс.
И ещё, ты проводишь менторство?
Спасибо за видео. Очень толковые нужные вещи разбираешь. но я поддержу предыдущего комментатора "Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко раздражает и мешает сосредоточиться"
Да, есть такая проблема. Постараюсь не повторять в дальнейшем. Спасибо за фидбэк!
Вот это мы смотрим.
Спасибо за фидбэк!
Спасибо за контент. Есть рац. предложение как улучшить подобные видео: меньше ненужных скроллов. Вот объясняется кусок кода на экране, он весь помещается, но все равно гоняется по экрану вверх-вниз. Это жутко разражает и мешает сосредоточиться
Да, есть плохая привычка. В новых видео кажется смог избавиться от этого)
привет, спасибо за труд, видео очень полезное.
Можешь записать про _proto_ & prototype.
привет, можешь посоветовать курс для повышение квалификации для мидлов? спс хотел купить курс у улби тв, но че то не знаю, почитал че они будут делать и понял что половину я знаю.... и не купил) и вот думаю может есть какие курсы хорошие еще
Аюб. Я наткнулся на твой канал недавно. Но ты меня заинтересовал. В отличие от других, впервые я вижу что-то сложное, а не то, что есть в доке реакта. Не знаю, как работают алгоритмы ютуба. Первое видео, которое мне попалось, это собес джуна, где в конце ты задал задачку на useRef. Это явно вопрос не на джуна. Затем я посмотрел видео на мидла, где в конце ты задал то ли похожую, то ли ту же самую задачу на useRef. Я подумал - на этом уровне есть о чём подумать. В данном видео я ожидал увидеть, в каких же случаях использовать контекст. Я ожидал, что контекст будет использоваться вместе с редакс/мобкс(нужное вставить). Но нет, ты показал обсервер-паттерн + что-то сверху(показал свой вариант сторов грубо говоря). У меня есть несколько вопросов:
- в каких случаях использовать контекст, если на проекте уже используются сторонние библиотеки для управления состоянием?
- сколько тебе лет?(может где-то есть инфа, я не в курсе, не искал)
- какой подход к архитектуре фронтенд-приложения в данный момент самый лучший или удобный по твоему мнению(fsd, модули или др.)
- свой предыдущий душный коммент я удалил(дважды ;) )
- что меня беспокоит больше всего(надеюсь, что и всех остальных), это то, как разрабатывать фронтенд на React по SOLID.
На этом моменте я хочу сказать свои мысли, как я понимаю SOLID в React. И я очень надеюсь на твой ответ, как сеньора.
S - компонент делает что-то одно. Если нужно делать GET--запрос на сервер, то делаем {который внутри: 1) Отображает данные; 2) отображает состояние загрузки; 3) показывает ошибку} (Я туповат, для меня это выглядит как кастомный хук useFetch + рендер+паттерн) ).
O - Использовать композицию children(это просто ОФИГЕННО, open-closed === чел, используй children, не надо прокидывать пропсы на 2(3, 4, 5 - 1000000000000000) уровней вниз (вопрос только в ререндерах) ( а вот если лагает, то пора попробовать React.memo, useReducer, useMemo, useCallback)
L - то, что я нашёл, так это блять {...props} Моя реакция -> ;). Неужели это правда???
I - Принцип разделения интерфейса. Говорит о том, что не надо привязываться к структуре объекта. Он говорит о том, что нужно использовать те поля, которые используются. Нах нам огромный объект, если мы от него хотим только 2 поля (название и дату создания, например). В контексте реакта я вижу это кол-вом пропсов(Хочу знать правильный ответ от сеньора)
D - инверсия зависимостей. Если брать реакт, то это тупо делегирование ответственности пропсу. Типа внутри компонента есть кнопка например, и у неё есть онклик. Так пусть лучше этим онкликом занимается пропс, чем сам компонент, ведь тогда компоненту пох, а вот пропс, и чел снаружи об этом беспокоится.
Трюк с null в initial values для контекста очень хорош только, если state выносить из провайдера выше (в компонент Recommended) и передавать в AppProvider. А если AppProvider делать так, чтобы он не принимал начальные значения, а инкапсулировал state в себе (при помощи компонента-обертки с useState), то вроде как уже придется мириться с тем, что хранимые значения могут быть null/undefined или выдумывать начальные значения, как было показано в ролике(()=>{} для функции, например).
Коммент для продвижения
Спасибо!
Как всегда уровень )) Прости за глупый вопрос react dev насколько хорошо нужно уметь верстать? мне нравится ковырять js + ts, но вот верстка вообще не нравится
Нужно знать на том уровне, чтобы ты мог спокойно заверстать какой-то бизнес-макет. Да, какие-то места подсмотреть можно, но не так, чтобы ты каждые 5 минут подсматривал в mdn.
Привет! Спс за труд, за видео, много нового узнаю.
А почему ты не используешь тип VoidFunction вместо записи ()=>void
Я даже не знал про него) Спасибо за фидбэк!
а смысл выпендриваться? Тоже самое что использовать выражение if(!~some.indexOf()) просто из-за того что знаешь. Но попробуй потом коллегам объяснить
Крутой видос! Спасибо большое!
subscribers можно было создать как Set?
Да, сет тут тоже можно было использовать.
Стоит еще показать, как быть, когда селектор возвращает несколько значений. Типа state => ({ isLoading: state.isLoading, users: state.users })
можно вторым аргументом передать shallowEqual - `useSelector(state => ({...}), shallowEqal)`
Привет. Было бы интересно глянуть как оптимизированный вариант ты бы реализовал для SSR. Я его использовал как паттерн, но пришлось выкручиваться при замене uLE и uE хуков. Контент как всегда отличный. Спасибо!
Привет! А с чем конкретно были проблемы? С useLayoutEffect?
Можно создать обертку useIsomorphicLayoutEffect, который будет работать, как useEffect на сервере и как useLayoutEffect на клиенте.
@@ayub_begimkulov Да сначала я так и сделал, правда потом переделал под свои нужды. Спасибо!
А был видос такой же только не про контекст, а про редакс тулкит? Если нет можно сделать. Про подводные камни рассказать, что не написано в документации
ua-cam.com/video/NqzdVN2tyvQ/v-deo.html
Есть видос про топ 6 ошибок - ua-cam.com/video/edmXoRwgQeI/v-deo.html
оптимизация выглядит как оверинженириг, проще тот же редакс подключить. Контекст ведь обычно используют для чуть более сложных компонентов, типо календарей и т.д. На мой взгляд достаточно мемоизировать передаваемый объект в value
Моя задача тут была показать то, какие есть возможности. Уже вышло видео про redux vs context. И я как там советую не пилить свои велосипеды.
Однако подобная реализация, как ты и сказал, может быть очень полезна для сложных компонентов, по типу DatePicker и тд., чтобы получать меньше апдейтов. А стор в либах юзать не очень прикольная идея.
почему, например мне нужно 1 состояние, остальное все посредством того же react-query, а в контексте авторизацию хранить=)
запиши такое видео по react lazy
дайте пожалуйста название канала в телеграмм, я не могу по ссылке перейти
@ayub_begimkulov_coding
Посл часть, где показываешь отпимизацию рендеров через стор на минималках. Такой код нужно уметь писать в общем джуну? А то крыша уже едет от инфы))
Нет, джуну это знать не нужно, но рано или поздно все равно нужно понять, как это все работает.
@@ayub_begimkulov спс за ответ. Тож думаю, что джуну не нужно, только и джуны не нужны))
Много полезной информации, которая пока что не понятна)
А можешь рассказать, на каком моменте стало не понятно? Есть моменты, которые можно улучшить с моей стороны?
@@ayub_begimkulov да мне кажется это проблема больше моя. Так как на практике такого не использовал и не очень понимаю то о чем ты говоришь. Но это круто, такого контента мало😅
Продолжай!
контент ценный, спасибо автору. Но для меня оказалось сложным воспринимать и укладывать в голове всю информацию с такой скоростью и при этом очень быстрый скроллинг по страницам - приходится как-то отматывать и уже позже склеивать аудио и видео контент.
Ты откуда Аюб?
Я никогда не понимал, какой смысл использовать контекст с оборачиванием, если можно просто создать глобальный объект и его импортировать в компоненты? Мы же так и так импортируем контекст в хуки для взаимодействия с данными
а рендер как будет происходить
@@olegivanov80 так мы в этом объекте также функцию сетстейта будем хранить, так же как и в провайдере и стейт будет обновляться абсолютно также...
лишние строчки с импортированием. Что-то поменяется - придется везде менять. Если создать хук и получать все данные и методы через него - то другое дело. А если Proxy использовать, то получился бы mobx. Только непонятно зачем нужен этот велосипед
@@inqvisitor3722 так я не вижу основной причины/преимущества использования контекста, он ничего не добавляет, те же самые импорты были бы если вместо create context использовали бы обычный объект
По сути контекст из себя представляет имплементацию dependency injection в рамках React. Если использовать глобальный объект - ты не сможешь так легко подменить его значение на моковые для тех же тестов например. Ну и плюс контекст позволяет отслеживать иерархию компонентов и переписывать его значение для определенного куска дерева. В общем, плюсов тут много)
Привет Аюб, темы у тебя интересные, но не интересно смотреть на готовое решение. Лучше в видео пиши код сам.
Спасибо за контент.
Проблема в том, что писать код и объяснить в то же время очень сложно. Надо подумать, как лучше все это организовать.