React Academy · Урок

Паттерн Render Props

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

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

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

В этом уроке Вы поймёте паттерн рендер-пропсов — передачу функции в качестве пропа, возвращающей JSX, — и узнаете, когда этот паттерн полезен для совместного использования поведения несколькими компонентами.

Что такое рендер-пропсы

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

<DataProvider render={data => <UserCard user={data} />} />

Простой пример рендер-пропа

Компонент Toggle управляет состоянием открыт/закрыт и вызывает рендер-проп, передавая ему текущее состояние и функцию переключения. Использующий компонент решает, как выполнить отображение.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Использование children в качестве рендер-пропа

Вместо именованного рендер-пропа можно использовать `children` в качестве функции. Многие библиотеки (React Router v5, Formik) применяют этот паттерн — его иногда называют «children как функция».

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Отслеживание положения мыши

Классический пример рендер-пропсов: компонент MouseTracker отслеживает положение курсора и передаёт его рендер-пропу. Любой использующий компонент может отобразить это положение удобным для себя способом.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Рендер-пропсы и пользовательские хуки

Рендер-пропсы были основным паттерном до появления хуков. Теперь пользовательские хуки делают то же самое более удобным способом: хук возвращает данные и функции, а компонент использует их в собственном JSX. В современном React предпочтение отдаётся хукам.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Когда рендер-пропсы по-прежнему уместны

Рендер-пропсы по-прежнему полезны, когда: (1) Вам нужно внедрить динамическое отображение в определённое место дерева, (2) Вы создаёте библиотеку компонентов без собственного интерфейса, отделяющую логику от интерфейса.

Предупреждение о производительности

Определение рендер-пропа непосредственно в разметке создаёт новую функцию при каждом отображении родительского компонента, не позволяя дочерним компонентам PureComponent/React.memo пропускать повторное отображение. Вынесите функции рендер-пропов в стабильную переменную или метод.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Композиция рендер-пропов

Вложение нескольких компонентов с рендер-пропами быстро приводит к «аду рендер-пропов» или «аду обёрток» — глубоко вложенным обратным вызовам, которые сложно читать. Это одна из причин появления хуков.

Рендер-пропы в библиотеках

В React Router v5 для Route использовались рендер-пропы. Downshift, Formik и React-Table также используют их варианты. Понимание рендер-пропов помогает читать и отлаживать код, использующий эти библиотеки.

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

В чём главное преимущество паттерна рендер-пропов по сравнению с передачей статического JSX?

Итоги

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

Следующий урок: **Компоненты высшего порядка (HOC): объяснение** — Вы будете оборачивать компоненты, чтобы внедрять пропы, защищать маршруты или добавлять журналирование.

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

Урок «Паттерн Render Props» бесплатный?

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

Чему я научусь в уроке «Паттерн Render Props»?

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

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

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

Сколько времени занимает урок «Паттерн Render Props»?

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

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

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

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

← Назад к React Academy