Це відео не доступне.
Перепрошуємо.
Контекст в React. useContext и вложенные Context.Provider
Вставка
- Опубліковано 4 сер 2024
- Разберемся что такое prop drilling и как это фиксить, узнаем как работает контекст в React и как избежать лишних ререндеров при его использовании.
Код из урока - github.com/senior-frontend/us...
Telegram - t.me/snr_fullstack
00:00 - Анонс последней темы в рамках серии React Hooks
00:33 - Prop Drilling
00:52 - Знакомство с кодом примера без использования контекста
02:39 - Почему Prop Drilling это плохо
04:09 - Отличия подходов наглядно на картинках
04:55 - Создание контекста и провайдера, немного о defaultValue
07:55 - useContext вместо Prop Drilling
11:13 - Особенности обращения к провайдеру, подробнее о defaultValue
14:06 - Почему Context API не может из коробки заменить стейт менеджер
15:39 - Разделение контекстов, MasterProvider
17:24 - Обзор кода финального примера
18:00 - Отличия перформанса финального примера с разделенным контекстом
19:13 - Итоги
GitHub Issues на тему ререндера контекста:
1. github.com/facebook/react/iss...
2. github.com/facebook/react/iss...
Спасибо огромное за мега крутое объяснение! На мой взгляд, для новичков оно сложновато, но если посмотреть несколько раз, то всё становится очень понятно. Да еще и такой нетривиальный подход осветили! Я в восторге!!! Еще раз безгранично благодарю! Надеюсь, что вы не перестанете снимать такой полезный контент! Удачи!🥰
zustand - наше всё!
Все по полочкам, довольно интересно слушать =)
Продолжай в том же духе, хорошо объясняешь!
Очень круто! Продолжай, пожалуйста, снимать!
Спасибо за контент!
А еще можно добавить оптимизацию одну: класть значение и изменение значения в разные провайдеры(them в один провайдер, а setTheme в другой) Эта фишка вообще к любым значениям применима. Ведь есть компоненты куда мы прокидываем например setTheme, а theme нет и будут лишние ненужные перерендеры.
Спасибо 😊
Какой голос красивый!..
Для чего восклицательный знак в этой строчке? useContext ( context: MyContext)! [0];
Я тоже на этой теме, но я думаю тебе не нужно зацикливаться на этой фигне, если ты шаришь в массивах, то должен знать что как оно должно работать
Это нужно для типизации. Этот восклицательный знак означает, что будет получено то значение, у которого будет элемент с индексом 0. Так как изначально мы контексту присваивали значение undefined, то естественно, что к нему мы не можем обратиться так как обращаемся к массиву. Поэтому тайпскрипт требует, чтобы мы ему точно сказали, что это будет не undefined, а массив. И проставив восклицательный знак, мы таким образом ему об этом сообщаем) Если вы пишите свой код без типизации, то этого восклицательного знака там просто не будет)
Круто, в фронтенде придумали глобалы