0Pricing
React Academy · Урок

HOC, Render Props или пользовательские хуки

Сравните три стратегии переиспользования кода по удобству чтения, тестированию и композиции.

«HOC, Render Props или пользовательские хуки» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы сравните HOC, рендер-пропы и пользовательские хуки по удобству чтения, пригодности для тестирования, возможности композиции и уместности каждого инструмента в разных ситуациях.

Проблема, которую решают все три подхода

Все три паттерна предназначены для совместного использования логики с состоянием или поведения несколькими компонентами — без копирования кода.

Преимущества HOC

HOC работают с классовыми компонентами (до появления хуков), без проблем интегрируются с библиотеками, не поддерживающими хуки, и могут применяться прозрачно, без изменения исходного кода обёрнутого компонента.

Недостатки HOC

HOC создают ад обёрток в DevTools, могут вызывать конфликты пропов, если два HOC внедряют пропы с одинаковым именем, и сложнее правильно типизируются в TypeScript. Ссылки необходимо передавать явно.

Преимущества рендер-пропов

Рендер-пропы делают поток данных явным — Вы точно видите, какие значения предоставляет компонент поведения. Они работают и в классовых, и в функциональных компонентах и отлично подходят для API компонентов без собственного интерфейса.

Недостатки рендер-пропов

Вложенные обратные вызовы рендер-пропов создают «ад обратных вызовов». Функции рендер-пропов, определённые непосредственно в разметке, нарушают мемоизацию. По сравнению с простым вызовом хука они добавляют визуальный шум.

Преимущества пользовательских хуков

Пользовательские хуки лучше всего подходят для композиции: можно вызывать и объединять несколько хуков, сохраняя JSX компонента чистым. Их легко тестировать изолированно. Типы TypeScript задаются достаточно просто.
const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

Недостатки пользовательских хуков

Пользовательские хуки работают только в функциональных компонентах, но не в классовых. Они не могут внедрять JSX — возвращают только данные и функции. Для некоторых случаев (например, защиты маршрутов с перенаправлением) нужны HOC или компоненты-обёртки.

Руководство по выбору

Нужно перенаправить пользователя или защитить маршрут? Используйте HOC или компонент-обёртку. Создаёте библиотеку интерфейсных компонентов без собственного интерфейса? Используйте рендер-пропы или хуки. Нужно предоставить общую логику с состоянием функциональным компонентам? Используйте пользовательский хук. Оборачиваете классовый компонент или сторонний компонент? Используйте HOC.

Современный подход по умолчанию: сначала хуки

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

Быстрая проверка

Какой паттерн совместного использования кода рекомендуется по умолчанию для извлечения логики с состоянием из современных функциональных компонентов React?

Итоги

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

Далее

Следующий урок: **Рефакторинг HOC в пользовательский хук** — Вы пошагово преобразуете HOC withAuth в хук useAuth.

Часто задаваемые вопросы

Урок «HOC, Render Props или пользовательские хуки» бесплатный?

Да — полный текст урока «HOC, Render Props или пользовательские хуки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «HOC, Render Props или пользовательские хуки»?

Сравните три стратегии переиспользования кода по удобству чтения, тестированию и композиции. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «HOC, Render Props или пользовательские хуки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Паттерн Render Props
  2. Компоненты высшего порядка (HOC)
  3. HOC, Render Props или пользовательские хуки
  4. Рефакторинг HOC в пользовательский хук
← Назад к React Academy