Обновление с v4 на v5

Обновление библиотеки Ant Design с версии 4 до версии 5 включает значительные изменения в архитектуре компонентов, системе темизации, типизации и способах работы с формами. Важно учитывать, что часть старого API устарела, а новые возможности позволяют создавать более производительные и гибкие интерфейсы.

Новая система темизации

В v5 внедрена полностью переработанная система тем, основанная на CSS-in-JS и алгоритме design token.

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

  • ConfigProvider теперь поддерживает объект theme с возможностью задания переменных token:
import { ConfigProvider, Button } from 'antd';

const theme = {
  token: {
    colorPrimary: '#1890ff',
    borderRadius: 6,
  },
};
  • Поддерживаются динамические темы, позволяющие менять цвета и шрифты без пересборки приложения.
  • Полностью отказ от Less-переменных в пользу токенов упрощает интеграцию с системами дизайна и CSS-in-JS.

Изменения в компонентах

Многие компоненты получили переработку API и улучшенную типизацию:

Button и другие базовые компоненты

  • size теперь может быть 'small' | 'middle' | 'large' с автоматическим наследованием от ConfigProvider.
  • Поддержка нового свойства type стала более строгой:
  • Упрощена кастомизация через style и token, меньше необходимости в кастомных CSS-классах.

Form

  • Форма перешла на новый механизм валидации с поддержкой async функций и улучшенной типизацией:
 {
    console.log('Submitted:', values);
  }}
>
  • Свойство preserve теперь управляет сохранением состояния полей при их удалении из DOM.
  • Form.List получил улучшения для работы с динамическими массивами данных и более строгую типизацию элементов.

Table

  • Новый API columns с поддержкой render и ellipsis позволяет более гибко управлять отображением данных:
const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    ellipsis: true,
    render: (text) => {text},
  },
];
;
    

  • Улучшена производительность при большом объёме данных благодаря
виртуальному скроллу через virtual и scroll
props.
    • 

Типизация и поддержка
TypeScript
В v5 полностью переработана поддержка
TypeScript:
    

  • Все компоненты имеют строгие типы, что предотвращает ошибки на этапе
компиляции.
    • 

  • Новый способ задания theme и token также
строго типизирован.
    • 

  • Для Form и Table появилась возможность
использовать generics:
    • 

interface User {
  id: number;
  name: string;
}

 columns={columns} dataSource={users} rowKey="id" />
Отказ от устаревших API
Некоторые методы и свойства v4 стали устаревшими или удалены:
    

  • Form.Item с children без name
теперь может работать иначе — рекомендуется использовать
name для всех полей.
    • 

  • ConfigProvider больше не принимает
prefixCls для глобальной настройки классов; используется
новый token API.
    • 

  • Некоторые устаревшие компоненты (LegacyIcon,
Mentions v4) требуют миграции или замены на новые
аналоги.
    • 

Советы по миграции
    

  1. Обновить antd до последней версии и проверить
установленные зависимости.
    2. 

  2. Заменить Less-переменные на token в
ConfigProvider.
    3. 

  3. Перепроверить формы и таблицы на совместимость с новым API.
    4. 

  4. Проверить кастомные стили, поскольку новая система тем может
изменить приоритеты CSS.
    5. 

  5. Использовать строгую типизацию для выявления ошибок на этапе
компиляции.
    6. 

Поддержка глобальной
конфигурации
ConfigProvider в v5 позволяет глобально настраивать:
    

  • Язык интерфейса (locale)
    • 

  • Токены дизайна (theme.token)
    • 

  • Настройки компонентов (componentSize,
componentDisabled)
    • 


  

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

  • Компоненты теперь используют React 18 оптимизации,
включая memo, useTransition и
concurrent features.
    • 

  • Table, List и виртуальные скроллы позволяют работать с тысячами
элементов без лагов.
    • 

  • Обновленная система токенов уменьшает перерисовку при смене
темы.
    • 

Итоговые преимущества v5
    

  • Унифицированная и строгая типизация для всех компонентов.
    • 

  • Гибкая и динамическая система тем через token.
    • 

  • Улучшенная производительность и поддержка крупных данных.
    • 

  • Современный API для форм и таблиц с полной поддержкой
async/await.
    • 

  • Лёгкая миграция при соблюдении новых правил конфигурации и
темизации.
    • 


        
                    

                Оглавление
            

                
    

    


    

        

            

                

                    javascript42 — изучаем JavaScript вместе