Всем привет ! 👋

В этой статье я хотел бы представить четыре шаблона или техники React, которые кажутся мне особенно полезными в повседневной жизни. Эти методы, безусловно, уже хорошо известны опытным разработчикам React, поэтому эта статья может быть предназначена для новичков.

  • Контейнер и презентация: разделение логики и отображения
  • Условный рендеринг: разные отображения одной и той же логики
  • Компоненты высшего порядка: повторное использование логики
  • Рендер-опора: как HOC, лучше?

Классический пример

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

Контейнер и презентация (умный и глупый)

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

Итак, один из самых популярных методов — воссоздать это понятие шаблона с помощью «Контейнерных и презентационных компонентов». Также называется «Умные и глупые компоненты» или «Статусные и чистые компоненты».

Не пропустите: статья Дэна Абрамова Презентационные и контейнерные компоненты.

Это разделение на две части. Контейнер подготавливает данные и действия (логика) и передает их компоненту отображения через пропсы.

Компонент дисплея становится настолько простым, что теперь его можно написать как функциональный компонент.

Подробнее о преимуществах функциональных компонентов.

Полезно знать: как только компонент разделен на несколько частей, очень удобно использовать файл «index», чтобы извне его можно было использовать как отдельный компонент. .

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

  • логический / разделительный дисплей, лучшая практика
  • многоразовый дисплей
  • требование для 3 следующих шаблонов

Ограничения:

  • отображение, связанное с логикой (жестко закодированная зависимость)
  • логика не может быть повторно использована вне этого компонента

Условный рендеринг

Если мы хотим создать второй компонент с той же логикой (те же данные и действия), но с совершенно другим отображением, хорошей идеей было бы повторно использовать наш контейнер.

Для этого мы создадим новый шаблон. Контейнер будет включать в себя оба и сможет отображать соответствующий.

При использовании этого компонента мы теперь можем указать шаблон, который хотим использовать («строка» или «карточка»).

Вариант: впрыск компонентов

Если мы хотим иметь возможность использовать столько шаблонов, сколько захотим, без необходимости каждый раз изменять контейнер, можно напрямую передать компонент шаблона через реквизиты.

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

  • логика распределяется между дисплеями
  • простой и интуитивно понятный

Ограничения:

  • логика на самом деле не может использоваться повторно (пояснения ниже)

Компоненты высшего порядка (HOC)

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

Если нам нужно создать третий шаблон с той же информацией, что и раньше (наши пользователи), плюс еще какую-то информацию (например, о погоде), то наш контейнер не сможет работать с этим шаблоном.

Разумеется, запрещено дублировать логику пользователей. Поэтому нам нужен новый шаблон, который сделал бы пользовательскую логику и логику погоды доступными отдельно. Затем мы могли бы импортировать эти две логики и передать их вместе (композиция) в наш шаблон.

Для этого мы будем использовать, дамы и господа, компонент высшего порядка (мы также можем сказать, HOC)!

Принцип HOC

HOC — это функция, которая принимает в качестве аргумента компонент и возвращает тот же компонент, но с большим количеством вещей.

Мы говорим об улучшателе, HOC улучшает компонент.

const superComponent = withSuperPowers(скучныйКомпонент);

Компоненты высшего порядка: withUserList()

Теперь мы можем использовать наши два HOC и предоставить комбинацию их реквизитов нашему шаблону пользователь + погода.

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

  • многоразовая и компонуемая логика
  • довольно простой и интуитивно понятный в использовании
  • позволяет управлять состоянием на основе данных

Недостатки:

  • props clash: риск столкновения, все реквизиты поступают в this.props
  • путаница с реквизитом: мы больше не знаем, кто предоставляет реквизит
  • смотрите объявление компонента в IDE открывает файл HOC вместо файла компонента
  • HOC не просто / весело писать (подробный синтаксис)

Рендер опоры

Этот шаблон начал появляться в 2017 году и быстро стал более популярным, чем HOC. Было показано, что реквизиты рендеринга имеют много преимуществ перед HOC, и все, что можно сделать с помощью HOC, также можно сделать с помощью реквизита рендеринга.

Полезно знать: знаменитая конференция, которая раскрыла силу рендеринга: Никогда не пиши другой HOC — Майкл Джексон

Логика будет инкапсулирована в Provider, и мы предоставим (через реквизиты) функцию, отвечающую за управление рендерингом в соответствии с параметрами. генерируется провайдером.

Приятного чтения: в документации React есть раздел, посвященный свойствам Renders.

Вариант: Функционируй как ребенок (FAAC)

Дочерняя функция — это тип реквизита рендеринга, в котором мы выбираем использование дочернего реквизита вместо «рендеринга». Разница минимальна, будем делать здесь FAAC.

Render prop сегодня считается стандартом. На нем сидят большинство последних библиотек React. Обычная практика для libs — предлагать как FAAC, так и HOC, как это видно в react-fns.

Преимущество:

  • логика и дисплей многоразовые
  • проще написать, чем HOC
  • легко компонуемый
  • декларативный стиль кодирования приятный для чтения

Катастрофы:

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

Вывод

Я думаю, что Container и Render props — два самых полезных шаблона React. Компоненты высшего порядка остаются важной техникой, которую необходимо знать.

Надеюсь, вам понравилась эта статья. Если это так, спасибо, что подумали о том, чтобы поделиться им.

Не стесняйтесь оставлять комментарии к любому замечанию.

Спасибо за ваше время и удачного кодирования! 😘👍