{cherkashin.dev}
← Все посты

12 февраля 2024 г. (изменено: 12 февраля 2024 г.)

Канал: @cherkashindev

818
#frontend #architecture #patterns

🚀 React — Compound Components

Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.

ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.

🔍 Основные характеристики:

  • Используется React контекст, чтобы управлять состоянием
  • Должен быть главный компонент, в котором хранится состояние и объявляется React контекст
  • Все дочерние компоненты используют состояние через React контекст

ℹ️ Он состоит из 2 простых подходов React:

  1. Композиция компонентов
  2. Паттерн “Провайдер” — использование контекста React ** 📝 Вначале рассмотрим подх**оды по отдельности

1️⃣ Что такое композиция?

Вместо вот этого

<Tile count={money} title="Стоимость" icon={<MoneyIcon/>}/>

Мы пишем вот так

<Tile>
  <Title>{title}</Title>
  <Number>{count}</Number>
  <Icon>{icon}</Icon>
</Tile>

Когда это может понадобиться? Например, когда у нас креативный дизайнер и нам нужно угодить ему:

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

В итоге, мы можем легко модифицировать любую часть компонента, и по-разному их комбинировать.**

2️⃣ Паттерн “Провайде**р”

Здесь идёт речь об обычном использовании контекста реакта, чтобы передавать какие-то данные на любую глубину дерева компонентов, минуя дочерние компоненты.

🔄 Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.

function MyTabs() {
    return (
   <TabContext value={value}>
       <TabList onChange={handleChange}>
         <Tab label="Item One" value="1" />
         <Tab label="Item Two" value="2" />
         <Tab label="Item Three" value="3" />
       </TabList>Ï
     <TabPanel value="1">Item One</TabPanel>
     <TabPanel value="2">Item Two</TabPanel>
     <TabPanel value="3">Item Three</TabPanel>
   </TabContext>
    );
}
  1. TabContext — главный компонент, в котором хранится состояние и объявляется React контекст
  2. Tab и TabPanel получают текущее значение активного таба неявно через React контекст. Явно значение не передаётся в каждый компонент.
  3. onChange объявлен только на компоненте TabList, компоненты Tab неявно получают его из контекста.

Ещё по теме:

👍 10