Всем привет ! 👋
В этой статье я хотел бы представить четыре шаблона или техники 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. Компоненты высшего порядка остаются важной техникой, которую необходимо знать.
Надеюсь, вам понравилась эта статья. Если это так, спасибо, что подумали о том, чтобы поделиться им.
Не стесняйтесь оставлять комментарии к любому замечанию.
Спасибо за ваше время и удачного кодирования! 😘👍