Улучшаем дизайн React приложения с помощью Compound components

Сегодня я хочу рассказать про один не очень популярный но очень классный паттерн в написании React приложений - Compound components.

Что это вообще такое

Compound components это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.

Самый наглядный пример такого подхода, который знают все фронты - это select с его option в обычном HTML.

<select name="meals">
  <option value="pizza">Pizza</option>
  <option value="pasta">Pasta</option>
  <option value="borsch">Borsch</option>
  <option value="fries">Fries</option>
</select>

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

Когда вам нужно задуматься об использовании Compound components

Я могу выделить 2 ситуации, где этот подход отлично работает:

Когда у вас есть несколько отдельных компонентов, но они являются частью чего-то одного и объединены одной логикой (как select в HTML).

Например вам нужно сделать табуляцию, ясное дело, что по отдельности каждый таб вы использовать не будете и вот тут хорошо подойдет Compound components.

import React from 'react';

import { Tabs } from 'tabs';

function MyTabs() {
    return (
        <Tabs onChange={()=> console.log('Tab is changed')}>
            <Tabs.Tab>Pie</Tabs.Tab>
            <Tabs.Tab className="custom-tab">Cake</Tabs.Tab>
            <Tabs.Tab disabled={true} >Candies</Tabs.Tab>
            <Tabs.Tab>Cookies</Tabs.Tab>
        </Tabs>
    );
}

export default MyTabs;

По моему выглядит весьма лаконично, понятно и по реактовски) У нас есть возможность кастомизировать каждый отдельный таб, передать ему любые пропсы, а так же задать какие-то параметры для всех табов сразу, ну и внутри компонента Tabs может быть написана какая-то общая логика. 

Сравните с тем, как это могло бы выглядеть без Compound components:

import React from 'react';

import { Tabs } from 'TabsWithoutCC';

function MyTabs() {
    return (
        <Tabs
            onChange={()=> console.log('Tab is changed')}
            tabs={[
                { name: "Pie" },
                { name: "Cake", className: 'custom-tab' },
                { name: "Candies", disabled: true },
                { name: "Cookies" }
            ]}
        />
    );
}

export default MyTabs;

А вот во втором варианте применения, как мне кажется, раскрывается вся мощь Compound Components.

Приведу пример из жизни: я делал форму аутентификации пользователя в банке, стандартно она должна выглядеть примерно так: есть поле ввода логина, пароля, у них должен быть тайтл, кнопка «войти», и нужно задать темную тему для всех компонентов, использовать эту форму будут на десктопах и в мобильном приложении через web-view

import React from 'react';

import { Form, Input, Button, Title } from 'our-design-system';

function AuthForm({ theme }) {
    return (
        <div>
            <Form theme={ theme }>
      					<div>
									<Title theme={ theme }>Логин</Title>
      						<Input theme={ theme } placeholder="Введите логин" type="text"/>
      					<div>
      					<div>
									<Title theme={ theme }>Пароль</Title>
	                <Input theme={ theme } placeholder="Введите пароль" type="password"/>
      					<div>
                <Button theme={ theme } type="submit">Войти</Button>
            </Form>
        </div>
    );
}

export default AuthForm;

Но помимо аутентификации по логину/паролю должна быть еще возможность залогиниться по номеру карты или по номеру счета. Что делать? Ну наверно добавить условие, в котором мы проверяем тип аутентификации:

import React from 'react';

import { Form, Input, Button, Title } from 'our-design-system';

function AuthForm({ isAccountAuth, theme }) {
    return (
        <div>
            <Form theme={ theme }>
                isAccountAuth ? (
										<div>
                      <Title theme={ theme }>Номер карты или счета</Title>
											<Input theme={ theme } placeholder="Введите номер карты или счета" type="number"/>
                    <div>
                ) : (
                    <div>
                      <Title theme={ theme }>Логин</Title>
                      <Input theme={ theme } placeholder="Введите логин" type="text"/>
                    <div>
                    <div>
                      <Title theme={ theme }>Пароль</Title>
                      <Input theme={ theme } placeholder="Введите пароль" type="password"/>
                    <div>
                )
                <Button theme={ theme } type="submit">Войти</Button>
            </Form>
        </div>
    );
}

export default AuthForm;

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

import React from 'react';

import { Form, Input, Button, CardInput, Title } from 'our-design-system';

function AuthForm({ isAccountAuth, isWebview, theme }) {
    return (
        <div>
            <Form theme={ theme }>
                { isAccountAuth && !isWebview && (
                 		<div>
                      <Title theme={ theme }>Номер карты или счета</Title>
											<Input theme={ theme } placeholder="Введите номер карты или счета" type="number"/>
                    <div>
                ) }

                { isAccountAuth && isWebview && <CardInput theme={ theme } placeholder="Введите номер карты или счета"/> }

                { !isAccountAuth && (
                    <div>
                      <Title theme={ theme }>Логин</Title>
                      <Input theme={ theme } placeholder="Введите логин" type="text"/>
                    <div>
                    <div>
                      <Title theme={ theme }>Пароль</Title>
                      <Input theme={ theme } placeholder="Введите пароль" type="password"/>
                    <div>
                )}
                <Button theme={ theme } type="submit">Войти</Button>
            </Form>
        </div>
    );
}

export default AuthForm;

Заметили что при каждом новом условии у нас появляются пропсы типа: isAccountAuth, isWebview. И это далеко не последнее, что нужно было учесть для каждого отдельного случая, я видел и побольше подобных "условных" пропсов. В общем суть я думаю вы поняли, наш компонент раздувается и обрастает кучей условий, код становится очень сложно читать и добавление чего-то нового причиняет боль и страдания (вам может показаться что мол норм читается, не так много кода, но тут я практически не передавал никаких пропсов, не использовал селекторы, не диспатчил ничего, тут нет никаких методов, которые кстати для каждого случая разные, в общем поверьте мне, полностью рабочий  продовский компонент выглядит устрашающе).

Думаю уже пришло время показать, как вообще реализовать Compound Component, давайте сделаем это на примере нашей формы:

import React from 'react';

import { Form, Input, Button, Title, CardInput } from 'our-design-system';

const AuthFormContext = React.createContext(undefined);

function AuthForm(props) {
    const { theme } = props;
    const memoizedContextValue = React.useMemo(
        () => ({
            theme,
        }),
        [theme],
    );

    return (
        <AuthFormContext.Provider value={ memoizedContextValue }>
            <Form>
                { props.children }
            </Form>
        </AuthFormContext.Provider>
    );
}

function useAuthForm() {
    const context = React.useContext(AuthFormContext);

    if (!context) {
        throw new Error('This component must be used within a <AuthForm> component.');
    }

    return context;
}

AuthForm.Input = function FormInput(props) {
    const { theme } = useAuthForm();
    return <Input theme={theme} {...props} />
};
AuthForm.CardInput = function FormCardInput(props) {
    const { theme } = useAuthForm();
    return <CardInput theme={theme} {...props} />
};
AuthForm.Field = function Field({ children, title }) {
    const { theme } = useAuthForm();
    return (
        <div>
            <Title theme={ theme }>{ title }</Title>
            { children }
        </div>
    )
};
AuthForm.SubmitButton = function SubmitButton(props) {
    const { theme } = useAuthForm();
    return <Button theme={theme} {...props} type="submit" />
};


export default AuthForm;

Я все написал в одном файле, но вам ничего не мешает вынести каждый внутренний компонент в отдельный файл.

Давайте разберемся, что тут происходит. 

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

В нашей ситуации важно иметь возможность пробрасывать состояние на любой уровень вложенности, тк я написал компонент AuthForm.Field , который просто отрендерит любой компонент, переданный ему в качестве ребенка и добавит ему тайтл. Им мы будем оборачивать наши поля ввода.

Так вот, для того чтобы дети имели доступ к контексту, я написал кастомный хук useAuthForm.

Теперь тема, которую мы передаем в AuthForm пробрасывается каждому элементу нашего Compound компонента через контекст.

Чтобы у нас не происходило лишних ререндеров, мы используем useMemo для создания контекста.

А теперь давайте попробуем воспользоваться нашим компонентом.

Так он будет выглядеть там, где нужна аутентификация по логину/паролю:

import React from 'react';

import AuthForm from "./compound-form";

export default function LoginAuth() {
    return (
        <AuthForm theme={'dark'}>
            <AuthForm.Field title="Логин">
                <AuthForm.Input type="text" placeholder="Введите логин" />
            </AuthForm.Field>
            <AuthForm.Field title="Пароль">
                <AuthForm.Input placeholder="Введите пароль" type="password" />
            </AuthForm.Field>
            <AuthForm.SubmitButton />
        </AuthForm>
    )
}

Так, там где вход по карте и счету для десктопа:

import React from 'react';

import AuthForm from "./compound-form";

export default function AccountAuth() {
    return (
        <AuthForm theme={'dark'}>
            <AuthForm.Field title="Номер карты или счета">
                <AuthForm.Input
                    type="text"
                    placeholder="Введите номер карты или счета"
                />
            </AuthForm.Field>
            <AuthForm.SubmitButton />
        </AuthForm>
    )
}

Так, там где вход по карте и счету для мобилы:

import React from 'react';

import AuthForm from "./compound-form";

export default function AccountAuth() {
    return (
        <AuthForm theme={'dark'}>
            <AuthForm.CardInput
                type="text"
                placeholder="Введите номер карты или счета"
            />
            <AuthForm.SubmitButton />
        </AuthForm>
    )
}

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

Давайте сюда же добавлю довольно распространенный пример для Compound Components, где с его помощью можно написать аккордеон:

import React, {
  createContext,
  useContext,
  useState,
  useCallback,
  useMemo
} from "react";
import styled from "styled-components";
import { Icon } from "semantic-ui-react";

const StyledAccordion = styled.div`
  border: solid 1px black;
  border-radius: 4px;
  margin: 10px;
`;

const StyledAccordionItem = styled.button`
  align-items: center;
  background: none;
  border: none;
  display: flex;
  font-weight: normal;
  font-size: 1em;
  justify-content: space-between;
  padding: 10px;
  text-align: left;
  width: 100%;

  &:focus {
    box-shadow: 0 0 2px 1px black;
  }
`;

const Item = styled.div`
  border-top: 1px solid black;

  &:first-child {
    border-top: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  &:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &:nth-child(odd) {
    background-color: ${({ striped }) => (striped ? "	#F0F0F0" : "transparent")};
  }
`;

const ExpandableSection = styled.section`
  background: #e8f4f8;
  border-top: solid 1px black;
  padding: 10px;
  padding-left: 20px;
`;

const AccordionContext = createContext();

function useAccordionContext() {
  const context = useContext(AccordionContext);
  if (!context) {
    // Error message should be more descriptive
    throw new Error("No context found for Accordion");
  }
  return context;
}

function Accordion({ children, defaultExpanded = "wine", striped = true }) {
  const [activeItem, setActiveItem] = useState(defaultExpanded);
  const setToggle = useCallback(
    (value) => {
      setActiveItem(() => {
        if (activeItem !== value) return value;
        return "";
      });
    },
    [setActiveItem, activeItem]
  );

  const value = useMemo(
    () => ({
      activeItem,
      setToggle,
      defaultExpanded,
      striped
    }),
    [setToggle, activeItem, striped, defaultExpanded]
  );

  return (
    <AccordionContext.Provider value={value}>
      <StyledAccordion>{children}</StyledAccordion>
    </AccordionContext.Provider>
  );
}

function ChevronComponent({ isExpanded }) {
  return isExpanded ? <Icon name="chevron up" /> : <Icon name="chevron down" />;
}

Accordion.Item = function AccordionItem({ value, children }) {
  const { activeItem, setToggle, striped } = useAccordionContext();

  return (
    <Item striped={striped}>
      <StyledAccordionItem
        aria-controls={`${value}-panel`}
        aria-disabled="false"
        aria-expanded={value === activeItem}
        id={`${value}-header`}
        onClick={() => setToggle(value)}
        selected={value === activeItem}
        type="button"
        value={value}
      >
        {children}
        <ChevronComponent isExpanded={activeItem === value} />
      </StyledAccordionItem>
      <ExpandableSection
        aria-hidden={activeItem !== value}
        aria-labelledby={`${value}-header`}
        expanded
        hidden={activeItem !== value}
        id={`${value}-panel`}
      >
        Showing expanded content about {value}
      </ExpandableSection>
    </Item>
  );
}

export { Accordion };

И вот как он используется:

import React from "react";
import { Accordion } from "./Accordion";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Accordion defaultExpanded="beer" striped>
        <Accordion.Item value="cider">Cider</Accordion.Item>
        <Accordion.Item value="beer">Beer</Accordion.Item>
        <Accordion.Item value="wine">Wine</Accordion.Item>
        <Accordion.Item value="milk">Milk</Accordion.Item>
        <Accordion.Item value="patron">Café Patron</Accordion.Item>
      </Accordion>
    </div>
  );
}

Подытожим

Паттерн Compound Components хорошо подходит, если вы делаете какую-то единую структуру, части которой хотелось бы сделать как отдельные компоненты, но в отрыве от этой структуры они использоваться не будут.

Так же, если вы видите, что у вашего компонента появляется куча пропсов типа: hasЧтоТоОдно=true, withЧтоТоДругое=true, showЧтоТоТретье=true, а внутри компонента появляется миллион условий, что рендерить а что не рендерить, то это явный знак, что стоит использовать Compound Components.

Это все что я хотел рассказать:) если у вас есть какие-то вопросы, примеры или вы считаете что я не прав, пишите, буду рад ответить, обсудить, поправить.