react-patterns

Паттерны React

Ты уже умеешь писать на React — теперь освой паттерны уровня senior: композицию, архитектуру состояния, границу сервер/клиент, Suspense и антипаттерны, от которых нужно избавляться, чтобы компоненты оставались простыми по мере роста.

16 юнитов·46 уроков·~14 ч

Начать трек →

Начни отсюда

Паттерн React — это именованное переиспользуемое решение повторяющейся задачи проектирования компонентов, и все они происходят из UI = f(state). Трек предполагает знание основ React и учит паттернам — вместе с их режимами отказа, — которые держат компоненты простыми по мере роста приложения.

01 Что такое паттерн React? 16 мин

Композиция

Компоненты соединяются композицией, а не наследованием: children и слоты инвертируют управление, и родитель поставляет содержимое, а компонент — структуру. Проброс пропсов нормален на пару уровней — тянись к большему, только когда он реально мешает.

01 Children и слоты 18 мин 02 Композиция вместо наследования 18 мин 03 Проброс пропсов и когда он нормален 18 мин

Compound-компоненты

Compound-компоненты разделяют неявное состояние через приватный контекст, давая потребителю свободу раскладки, пока родитель владеет поведением. Поддерживай и управляемый, и неуправляемый режимы и применяй паттерн к переиспользуемым виджетам, а не к фиксированным одноразовым.

01 Паттерн compound-компонентов 18 мин 02 Общее состояние через контекст компонента 19 мин 03 Управляемый против неуправляемого 19 мин

Render-props и headless

Render-props и headless-компоненты отделяют поведение от представления; кастомный хук — их современный наследник для переиспользования логики: ты получаешь состояние, обработчики и доступность, а разметку поставляешь сам.

01 Render-props 18 мин 02 Headless-компоненты 19 мин 03 Хуки как headless-паттерн 19 мин

Кастомные хуки

Кастомный хук именует и изолирует кусок состояния и логики для переиспользования и тестов — извлекай при реальном дублировании или ясной концепции, проектируй его зависимости и очистку как контракт и не извлекай обёртку с единственным вызовом.

01 Вынос кастомного хука 18 мин 02 Проектирование хука и зависимости 19 мин 03 Когда не выносить хук 18 мин

Колокация и подъём состояния

Держи состояние так низко, как можно, и поднимай только при реальном совместном использовании; вычисляй то, что можешь, вместо хранения; а разделяемое навигационное состояние держи в URL.

01 Колокация и подъём состояния 18 мин 02 Выводи, а не храни 18 мин 03 URL как состояние 18 мин

Контекст по уму

Контекст подходит для редко меняющегося, широко читаемого состояния; дроби толстые контексты и отделяй state от dispatch, чтобы сузить радиус перерисовок; сочетай его с редьюсером для сквозного состояния с реальными переходами.

01 Контекст для низкочастотного состояния 18 мин 02 Разделение контекстов 18 мин 03 Контекст с редьюсером 20 мин

Внешнее состояние и сторы

Тянись к внешнему стору, только когда подъём и контекст перестают масштабироваться; используй селекторы, чтобы подписаться лишь на нужный срез (и избегай tearing), и useSyncExternalStore, чтобы безопасно подключить любой внешний источник.

01 Когда тянуться к стору 19 мин 02 Селекторы и tearing 18 мин 03 useSyncExternalStore 19 мин

Эффекты с дисциплиной

useEffect — для синхронизации с внешними системами, а не для реакции на состояние; большинство эффектов можно удалить (вычисляй вместо них), а каждый оставшийся обязан очищаться и избегать устаревших замыканий.

01 Эффекты — это про синхронизацию 19 мин 02 Возможно, эффект тебе не нужен 19 мин 03 Очистка эффектов и устаревшие замыкания 19 мин

Производительность рендеринга

Не мемоизируй по умолчанию — сначала профилируй; memo, useMemo и useCallback помогают только как система, а стабильные уникальные ключи предотвращают и лишние рендеры, и порчу состояния.

01 Когда мемоизировать 18 мин 02 memo, useMemo, useCallback 19 мин 03 Ключи и списки 18 мин

Граница сервер/клиент

Серверные компоненты — по умолчанию; опускай 'use client' к интерактивным листьям, передавай через границу только сериализуемые пропсы и держи доступ к данным и секреты только на сервере.

01 Серверные против клиентских компонентов 18 мин 02 'use client' и сериализуемые пропсы 19 мин 03 server-only и данные, текущие вниз 19 мин

Suspense и границы

Размещай Suspense близко к месту, где нужны данные, и сопровождай каждую границу границей ошибок; используй переходы и отложенные значения, чтобы UI оставался отзывчивым при тяжёлых обновлениях.

01 Размещение Suspense 18 мин 02 Error boundaries 19 мин 03 Переходы и отложенные значения 19 мин

Формы и actions

По умолчанию — неуправляемые поля с FormData, а управляй только когда значение влияет на UI; form actions React 19 вместе с useActionState обрабатывают ожидание и ошибки, а useOptimistic делает мутации мгновенными на вид.

01 Управляемые и неуправляемые формы 18 мин 02 Form actions и useActionState 19 мин 03 Оптимистичный UI с useOptimistic 18 мин

Паттерны загрузки данных

Загружай на сервере (RSC) для начальных данных и бери query-библиотеку, когда нужны клиентский кеш, дедупликация и мутации; никогда не копируй серверное состояние в клиентское и загружай независимые данные параллельно.

01 Загрузка в RSC против клиентского кэша 19 мин 02 Библиотеки запросов и дедупликация 19 мин 03 Избегаем водопадов запросов 19 мин

Антипаттерны React

Божественные компоненты, проброс пропсов, эффекты-зеркала вычисляемого состояния, злоупотребление контекстом и ключи-индексы — это антипаттерны React; лечи каждый подходящим паттерном, не перегибая в глобальный стор или случайные ключи.

01 Божественные компоненты и проброс пропсов 19 мин 02 Эффект-как-производное-состояние 19 мин 03 Неправильный контекст и индекс как key 19 мин

Капстоун: рефакторинг React-фичи

Собери всё на запутанной React-фиче: инвентаризируй запахи паттернов, рефактори пошагово, применяя композицию, хуки, состояние и границы, и измерь, что перерисовок стало меньше, а следующее изменение стало локальным.

01 Капстоун I: инвентаризация паттерн-смеллов 20 мин 02 Капстоун II: инкрементальный рефакторинг 21 мин 03 Капстоун III: измерь до и после 20 мин

Следующий трек

Git: от нуля до сеньора

Начни, ни разу не запустив `git init`. Закончи, умея ветвиться, делать rebase, восстанавливать потерянную работу, переписывать историю — включая смену автора коммита — и вести рабочий процесс ветвления, на котором катит настоящая команда.