Введение

Что очень полезно и всеобъемлюще в мире React, так это его шаблоны проектирования, поскольку они помогают поддерживать масштабируемость кода и придают смысл создаваемым нами компонентам.

Существует несколько шаблонов, и в этой статье мы поговорим о составных компонентах, расширенном шаблоне, который особенно полезен для создания гибких составных интерфейсов.

Что такое сложные компоненты?

Составные компоненты — это расширенный шаблон в React. Он направлен на создание более гибкой конструкции, позволяющей совместно использовать состояние и логику между группой компонентов, при этом связь между родительским компонентом и дочерними компонентами должна осуществляться гибким способом.

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

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

У нас есть пример составных компонентов в структуре тегов select и option в HTML:

Выбор работает как менеджер состояний интерфейса, а параметры настраиваются так, как должен работать выбор.

Пример использования составных компонентов

В этом примере мы создадим модальное окно, которое разделено на два составных компонента: Toggle и Content. Где они будут делиться состоянием открытия и закрытия модального окна между собой.

Давайте посмотрим, как будет выглядеть создание этого компонента шаг за шагом:

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

Создание основы модального компонента

Обратите внимание, что мы используем дочерние элементы, чтобы получить компоненты, которые будут вставлены в модальное окно, мы хотим использовать его следующим образом:

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

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

Наконец, мы можем назначить оба модального компонента и все (:

С использованием

Результат

Таким образом, мы делаем создание и использование модальных окон чрезвычайно гибкими и допускающими многократное использование. Modal.Toggle отвечает за активацию модального отображения, а Modal.Content должен отображать содержимое нашего модального окна.

Эта платформа позволяет разработчикам легко настраивать поведение и содержимое модальных окон в соответствии с конкретными потребностями их приложений, делая код более чистым и организованным.

Другие примеры

Мы также можем использовать составные компоненты в других контекстах, например:

Компоненты аккордеона:

Компоненты меню:

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

Заключение

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

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

ПРИМЕЧАНИЕ: я разместил тот же контент в response4noobs, репозитории, предназначенном для группировки статей, созданных разработчиками во вселенной React. Это стоит посмотреть =).