React Context - хак, чтобы избежать ненужных ре-рендеров #easyit
Разбираемся как работать с React Context API. Организация модуля работы с контекстом, продвинутый подход для исключения ненужных ре-рендеров компонентов. Исходники использованные в этом видео находятся здесь: https://github.com/easy-linux/reactjs/tree/main/ReactContext Тайм коды: 00:19 Введение 01:00 Изменения по сравнению с шаблоном по-умолчанию 02:11 Разбираем код корневого компонента проекта 03:15 Код компонента Counter, используется для изменения значения счетчика 04:02 Код компонента CounterLabel, используется для вывода значения счетчика 04:14 Как можно стилизовать текст, отображаемый console.log 04:45 Код компонента Text1, используем для отображения введенного текста 05:35 Код модуля, обеспечивающего работу с контекстом стандартным образом 08:18 Смотрим что происходит при изменение контекста при использовании стандартного подхода 09:40 Оборачиваем компоненты HOC-ом React.memo 10:08 Проверяем работу приложения с использованием React.memo для всех дочерних компонентов 10:55 В чем заключается основная проблема стандартного использования React Context 12:02 Переключаемся на использование модуля с продвинутым подходом 12:29 Тестируем работу модуля продвинутой работы с контекстом 12:58 Подробный разбор кода с продвинутым подходом к работе с данными контектекста 17:06 Заключение Видео о том, что такое Symbol и как с ним работать. https://youtu.be/Ve3g0-fPclY Как написать скрипт для инициализации проекта: https://youtu.be/JxpS8o1FCik Сериал "Создание SPA приложения на чистом JS": https://www.youtube.com/watch?v=eqAefmCqA6M&list=PLCh6bwt6jth_fkFrU15eyY6Hv18NuWcwa Полезные видео для лучшего понимания JS: Стрелочные функции 1 - https://youtu.be/21wNsy72BKg Стрелочные функции 2 - https://youtu.be/DlQYk3ZvERo Макро и микро задачи - https://youtu.be/cVzwEowLe08 Web worker - https://youtu.be/ZqjDBxt8DYo Service worker - https://youtu.be/kV9Gq6FrABg Debouncing/throttling - https://youtu.be/P09SxTfQkVY Видео по работе с vite.js: https://youtu.be/t98Q9hliZZo Полезные видео по настройке webpack: Минимальная конфигурация - https://youtu.be/unEl3Hezwpw Настройка горячей перезагрузки - https://youtu.be/oOpzkF2nU0s Настройка сборки проекта с подгрузкой файлов css/scss/изображений - https://youtu.be/3B-NGZmMe-Y Настройка сборки мультистраничного сайта - https://youtu.be/aMzCDR_MHF0 Самый простой способ установить nodejs на Linux и Mac: https://youtu.be/gP4OPx2vBoc #easyit #javascript #js #vanillajs @EasyITChannel