Паттерн compound-компонентов

Compound-компонент — это один родитель, владеющий состоянием, плюс под-компоненты, читающие его неявно: потребитель никогда не прокидывает состояние вручную. Сравни две формы API. Tabs на пропсах принимает массив данных и диктует разметку; compound-Tabs принимает children и позволяет вызывающему написать разметку, пока части молча разделяют, какая вкладка активна.

// props-driven: the component owns the layout, you feed it config
<Tabs
  tabs={[{ id: "a", label: "Account", panel: <Account /> }]}
  renderTab={(t) => <span>{t.label}</span>}
/>

// compound: you own the layout, the pieces share state implicitly
<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Tab value="account">Account</Tabs.Tab>
    <Tabs.Tab value="billing">Billing</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="account"><Account /></Tabs.Panel>
  <Tabs.Panel value="billing"><Billing /></Tabs.Panel>
</Tabs>

Compound-версия читается как разметка, а не конфигурация. Эта читаемость и есть фича — и берётся она из того, что части разделяют состояние, без передачи вызывающим activeTab каждой из них.

Неявный канал между родителем и частями — это React-контекст: родитель предоставляет, каждый под-компонент потребляет. Родитель держит активное значение в состоянии и выставляет его (плюс сеттер) через контекст. Tabs.Tab читает контекст, чтобы знать, выбран ли он, и переключить значение по клику; Tabs.Panel читает его, чтобы решить, рендериться ли. Никакого проброса пропсов, никакого клея от вызывающего.

type TabsCtx = { value: string; setValue: (v: string) => void };
const TabsContext = createContext<TabsCtx | null>(null);

function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error("Tabs.* must be rendered inside <Tabs>");
  return ctx;
}

function Tabs({ defaultValue, children }: { defaultValue: string; children: React.ReactNode }) {
  const [value, setValue] = useState(defaultValue);
  return <TabsContext.Provider value={{ value, setValue }}>{children}</TabsContext.Provider>;
}

Защита useTabs, которая бросает исключение при использовании вне провайдера, — не опциональный лоск: она превращает запутанный крах с null в чёткое нарушение контракта прямо в месте вызова.

Под-компоненты прикреплены как статические поля на родителе — Tabs.List, Tabs.Tab, Tabs.Panel — так что API приходит одним импортом. Каждая часть — обычный компонент, вызывающий useTabs(). Подвешивание их к родителю группирует пространство имён семейства, сигнализирует об их принадлежности друг к другу и означает, что потребители импортируют один символ.

Tabs.List = function List({ children }: { children: React.ReactNode }) {
  return <div role="tablist">{children}</div>;
};

Tabs.Tab = function Tab({ value, children }: { value: string; children: React.ReactNode }) {
  const { value: active, setValue } = useTabs();
  const selected = active === value;
  return (
    <button role="tab" aria-selected={selected} onClick={() => setValue(value)}>
      {children}
    </button>
  );
};

Tabs.Panel = function Panel({ value, children }: { value: string; children: React.ReactNode }) {
  const { value: active } = useTabs();
  return active === value ? <div role="tabpanel">{children}</div> : null;
};

Tabs.Tab не получает isActive от потребителя — он выводит его из разделяемого состояния. Этот вывод, живущий внутри части, и даёт вызывающему свободу раскладки: он ставит вкладку куда угодно, а она всё равно знает, выбрана ли она.

Выигрыш — эргономика потребителя: вызывающий свободно перекомпоновывает внутренности, потому что части находят своё состояние по позиции в дереве, а не по прокинутым пропсам. Те же Tabs рендерят панели над лентой на мобильном, всовывают бейдж в подпись вкладки или бросают разделитель между вкладками — ничего из этого родителю не пришлось предвидеть. API на пропсах потребовал бы нового пропса под каждое из этих; compound-API не требует ничего, потому что раскладка — забота потребителя, а поведение — родителя.

// the consumer reshuffles internals — the parent never changed
<Tabs defaultValue="inbox">
  <Tabs.Panel value="inbox"><Inbox /></Tabs.Panel>   {/* panels first on mobile */}
  <Tabs.List>
    <Tabs.Tab value="inbox">Inbox <UnreadBadge /></Tabs.Tab>  {/* badge inline */}
    <Divider />                                              {/* arbitrary node */}
    <Tabs.Tab value="archive">Archive</Tabs.Tab>
  </Tabs.List>
</Tabs>

Именно поэтому дизайн-системы (Radix, Reach, Headless UI, Ariakit) поставляют compound-API: библиотека владеет сложным, инвариантным поведением; приложение владеет раскладкой, которая отличается на каждом экране.