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

Библиотека Ant Design предоставляет широкий набор утилит, которые упрощают разработку интерфейсов на JavaScript и React. Эти утилиты можно разделить на несколько категорий: стиль, форматирование данных, управление состоянием и вспомогательные функции компонентов. Их использование позволяет сократить код и повысить читаемость приложений.

Стили и темы

Использование ConfigProvider

ConfigProvider позволяет централизованно управлять настройками всей библиотеки Ant Design в приложении:

import { ConfigProvider, Button } from 'antd';
import ruRU from 'antd/es/locale/ru_RU';

Ключевые моменты:

  • locale задаёт локализацию компонентов.
  • prefixCls позволяет изменять префикс классов, что полезно для интеграции с CSS-модулями или сторонними стилями.
  • Через ConfigProvider можно менять тему приложения (light/dark) и другие глобальные настройки.

Форматирование данных

Ant Design включает утилиты для работы с датами, валютой и числами.

Форматирование чисел

Компонент Statistic и утилита Intl.NumberFormat позволяют создавать удобные числовые форматы:

import { Statistic } from 'antd';
  • precision определяет количество знаков после запятой.
  • valueStyle позволяет напрямую задавать стили значения.

Форматирование дат

Для работы с датами Ant Design часто интегрируется с moment.js или dayjs:

import dayjs from 'dayjs';
import { DatePicker } from 'antd';
  • defaultValue принимает объект dayjs или moment.
  • Компоненты календаря используют локализацию через ConfigProvider.

Управление состоянием форм

Утилиты Ant Design для форм помогают организовать валидацию, сброс и связывание данных с компонентами.

import { Form, Input, Button } from 'antd';

const [form] = Form.useForm();

Особенности работы с формами:

  • Form.useForm() создаёт объект формы для управления состоянием.
  • form.validateFields() выполняет проверку всех полей.
  • Form.Item связывает компонент с именем поля и правилами валидации.

Вспомогательные функции компонентов

Ant Design предоставляет утилиты для создания модальных окон, уведомлений и сообщений, которые упрощают динамическое взаимодействие с пользователем.

Модальные окна

import { Modal, Button } from 'antd';

const showModal = () => {
  Modal.info({
    title: 'Информация',
    content: 'Это информационное сообщение.',
  });
};
  • Методы Modal.info, Modal.success, Modal.error, Modal.warning создают стандартные окна.
  • Модальные окна автоматически управляют жизненным циклом компонента.

Уведомления и сообщения

import { notification, message } from 'antd';

// Notification
notification.open({
  message: 'Уведомление',
  description: 'Подробности уведомления здесь.',
});

// Message
message.success('Операция успешно выполнена');
  • notification создаёт окна с более сложным содержанием.
  • message используется для кратких всплывающих уведомлений.

Работа с сеткой и адаптивностью

Ant Design предлагает утилиты для быстрого построения сеток:

import { Row, Col } from 'antd';


  Левая колонка
  Правая колонка
  • gutter задаёт расстояние между колонками.
  • span указывает, какую часть сетки занимает колонка (из 24).
  • Комбинируя xs, sm, md, lg, xl, можно задавать адаптивное поведение колонок.

Использование хуков Ant Design

Ant Design предоставляет встроенные хуки для работы с компонентами:

  • useBreakpoint — определяет текущий размер экрана.
import { Grid } from 'antd';
const { useBreakpoint } = Grid;

const screens = useBreakpoint();
console.log(screens.md); // true, если экран >= md
  • useForm — для управления формами (Form.useForm()).
  • useNotification — создание уведомлений через хуки без глобальных методов.

Иконки и вспомогательные утилиты

АнтДизайн включает библиотеку иконок @ant-design/icons и утилиты для их рендеринга:

import { SmileOutlined } from '@ant-design/icons';
  • Поддерживаются все стандартные SVG-иконки.
  • Иконки можно использовать внутри кнопок, меню, карточек и уведомлений.
  • Можно создавать кастомные иконки через Icon.createFromIconfontCN.

Оптимизация и производительность

Для больших приложений важно правильное использование утилит Ant Design:

  • Lazy loading компонентов с React.lazy() и Suspense.
  • Использование ConfigProvider для глобальных настроек вместо повторного конфигурирования.
  • Минимизация ререндеров через хуки состояния и мемоизацию компонентов (React.memo).

Эти практики позволяют сократить нагрузку на DOM и ускорить рендеринг интерфейса.

Оглавление