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

В разработке с использованием Ant Design (AntD) переиспользование компонентов является ключевым подходом для повышения эффективности, консистентности интерфейсов и уменьшения дублирования кода. AntD предоставляет богатый набор компонентов, которые можно адаптировать и комбинировать, создавая собственные абстракции.

Абстрагирование стандартных компонентов

Любой компонент AntD можно обернуть в собственный, создавая повторно используемую обертку с предустановленными свойствами. Например, часто используются кастомные кнопки:

import { Button } from 'antd';

const PrimaryButton = ({ children, ...props }) => (
  <Button type="primary" {...props}>
    {children}
  </Button>
);

export default PrimaryButton;

Такой подход позволяет:

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

Создание оберток для форм и элементов ввода

Формы в AntD состоят из элементов Form.Item и полей ввода (Input, Select, DatePicker и др.). Часто встречаются повторяющиеся шаблоны валидации и оформления. Создание оберток упрощает код и обеспечивает консистентность:

import { Form, Input } from 'antd';

const TextField = ({ name, label, rules, ...props }) => (
  <Form.Item
    name={name}
    label={label}
    rules={rules}
  >
    <Input {...props} />
  </Form.Item>
);

export default TextField;

Применение такого подхода позволяет:

Избавиться от дублирования валидационных правил.
Легко подключать пользовательские стили или дополнительные логики (например, маски ввода, автокомплит).
Стандартизировать внешний вид форм в разных модулях приложения.

Использование композиции компонентов

Ant Design поддерживает композицию: один компонент может содержать другие, передавая им свойства. Например, создание таблицы с кастомным рендером колонок:

import { Table, Button } from 'antd';

const ActionTable = ({ columns, data, onEdit, onDelete }) => {
  const enhancedColumns = [
    ...columns,
    {
      title: 'Действия',
      key: 'actions',
      render: (_, record) => (
        <>
          <Button type="link" onCl ick={() => onEdit(record)}>Редактировать</Button>
          <Button type="link" danger onCl ick={() => onDelete(record)}>Удалить</Button>
        </>
      ),
    },
  ];

  return <Table columns={enhancedColumns} dataSource={data} />;
};

export default ActionTable;

Преимущества композиции:

Сохранение гибкости компонента при добавлении стандартных функциональностей.
Возможность легко расширять базовую таблицу новыми колонками или действиями без изменения исходного компонента.
Разделение логики отображения и действий пользователя.

Создание тем и конфигураций для повторного использования

Ant Design поддерживает настройку темы и глобальные конфигурации через ConfigProvider. Можно задавать единые параметры для всего приложения или конкретного модуля:

import { ConfigProvider, Button } from 'antd';

const AppConfig = ({ children }) => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#1DA57A',
        borderRadius: 8,
      },
    }}
  >
    {children}
  </ConfigProvider>
);

export default AppConfig;

Преимущества глобальной конфигурации:

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

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

Переиспользование в AntD не ограничивается визуальными компонентами. Часто создаются кастомные хуки, которые инкапсулируют логику взаимодействия с компонентами:

import { useState } from 'react';
import { Modal } from 'antd';

const useModal = () => {
  const [visible, setVisible] = useState(false);

  const open = () => setVisible(true);
  const close = () => setVisible(false);

  const ModalWrapper = ({ children, ...props }) => (
    <Modal visible={visible} onCan cel={close} {...props}>
      {children}
    </Modal>
  );

  return { open, close, ModalWrapper };
};

export default useModal;

Такой подход позволяет:

Унифицировать управление состоянием модальных окон.
Легко подключать модальные компоненты в любом месте приложения.
Сократить дублирование кода для открытия/закрытия модальных окон и передачи данных.

Паттерн «Высокопорядковые компоненты» (HOC)

Для повторного применения логики также можно использовать HOC, оборачивая стандартные компоненты AntD:

import { Spin } from 'antd';

const withLoading = (WrappedComponent) => ({ loading, ...props }) => (
  <Spin spinning={loading}>
    <WrappedComponent {...props} />
  </Spin>
);

export default withLoading;

HOC предоставляет:

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