React — Compound Components
Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.
ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.
🔍 Основные характеристики:
- Используется React контекст, чтобы управлять состоянием
- Должен быть главный компонент, в котором хранится состояние и объявляется React контекст
- Все дочерние компоненты используют состояние через React контекст
ℹ️ Он состоит из 2 простых подходов React:
1. Композиция компонентов
2. Паттерн “Провайдер” — использование контекста React
📝 Вначале рассмотрим подходы по отдельности
1️⃣ Что такое композиция?
Вместо вот этого
Мы пишем вот так
Когда это может понадобиться? Например, когда у нас креативный дизайнер и нам нужно угодить ему:
- В одном месте, показывать карточку без иконки
- В другом, показывать карточку, где цифра то посередине, то слева, то справа, то на луне
- В третьем, нам нужно добавить иконку, чтобы при наведении показывалось описание
В итоге, мы можем легко модифицировать любую часть компонента, и по-разному их комбинировать.
2️⃣ Паттерн “Провайдер”
Здесь идёт речь об обычном использовании контекста реакта, чтобы передавать какие-то данные на любую глубину дерева компонентов, минуя дочерние компоненты.
🔄 Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.
1. TabContext — главный компонент, в котором хранится состояние и объявляется React контекст
2. Tab и TabPanel получают текущее значение активного таба неявно через React контекст. Явно значение не передаётся в каждый компонент.
3. onChange объявлен только на компоненте TabList, компоненты Tab неявно получают его из контекста.
Ещё по теме:
- Александр Дунай (Альфа-Банк) — Улучшаем качество кода React-приложения с помощью Compound Components
- JavaScript Patterns — Provider Patter
- JavaScript Pattern — Compound Pattern
https://t.me/cherkashindev/166