Вышла версия Ant Design 4.0!

Введение

Мы выпустили версию 4.0 RC на SEE Conf. После более чем месяца сбора и корректировки отзывов пришло время выпускать 4.0! Спасибо всем, кто предоставил отзывы, предложения и вклад в этот период. Здесь мы объединим обновления, уже включенные в версию rc и некоторые недавние обновления. Полную обновленную документацию можно найти здесь . адрес документа v4: https://ant.design

Следует отметить, что версия v3 была объединена с веткой 3.x-stable в декабре 2019 года и перешла на обслуживание. Мы по-прежнему будем выполнять полугодовые работы по обслуживанию версии v3. Крайний срок обслуживания - май 2020 г.

Обновление проектной спецификации

Мы изменили базовые закругленные углы с 4px на 2px . Скругление само по себе является деталью, и в средней и фоновой сценах мы ставим эффективность в качестве первого приоритета, поэтому мы уменьшаем визуальные детали интерфейса и повышаем эффективность чтения информации интерфейса. Кроме того, мы скорректировали тени, чтобы они больше соответствовали реальным теням, а также подчеркнули иерархию информации.

Темная тема

Мы обновили цветовую систему на основе версии v3, а v4 предоставляет темную тему. Вы можете щелкнуть функцию переключения темы на странице, чтобы увидеть эффект темной темы:

Компонент без полей

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

Регулировка совместимости

Ant Design 3.0 приложил много усилий для обеспечения совместимости со старыми версиями IE. Однако, согласно отраслевой статистике, глобальные и отечественные браузеры IE9 / 10 сокращаются из-за обновлений системы Windows. Мы прекратили поддержку IE 9/10 в версии 4.0 (но по-прежнему будем поддерживать IE 11). Следовательно, некоторые ранее использовавшиеся низкопроизводительные компоненты также улучшат производительность с новыми функциями CSS.

В то же время мы также обновили минимальную версию React, от которой зависит v4, до React 16.9. Это означает, что версия v4 предоставит больше ловушек для упрощения вашего кода.

Кроме того, мы удалили некоторые устаревшие API-интерфейсы, о которых предупреждалось в версии v3. Мы настоятельно рекомендуем вам обновить текущий проект до последней версии v3 и обновить устаревший API на основе предупреждающего сообщения.

Меньший размер

В antd @ 3.9.0 мы представили значок svg ( зачем использовать значок svg? ). API значков, использующий строковое имя, не может быть загружен по запросу, поэтому полностью представлен файл значков svg, что значительно увеличивает размер упакованного продукта. В 4.0 мы скорректировали API использования значков для поддержки встряхивания дерева, уменьшив размер пакета Antant по умолчанию примерно на 150 КБ (Gzip).

Использование устаревших значков будет отменено:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

В 4.0 он будет представлен по запросу:

  import { Button } from 'antd';

 // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

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

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

Переписать форму

Форма как высокочастотный компонент имеет несколько избыточный API. Пользователь должен получить экземпляр формы через HOC Form.create и использовать form.getFieldDecorator для выполнения привязки данных к компоненту. Кроме того, вся форма обновляется каждый раз при изменении данных, что снижает производительность в формах больших данных. В версии v4 Form будет поставляться с экземпляром формы. Вы можете напрямую связать данные через свойство name объекта Form.Item, тем самым упростив ваш код:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Мы обнаружили, что в большинстве сценариев разработчика действительно интересуют только значения, которые форма успешно отправляет. Таким образом, мы предоставляем onFinish , который срабатывает только после прохождения проверки формы, и validateFields больше не нужны.

Кроме того, Form предоставляет метод хуков Form.useForm который позволяет вам управлять примером формы:

const [form] = Form.useForm();

React.useEffect(() => {
  form.setFieldValues({ ... });
});

<Form form={form} />

В то же время мы предоставляем компонент Form.List, чтобы вы могли легко управлять полями списка:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Перезапись таблицы

Поскольку мы скорректировали минимальные требования для совместимости, мы перешли на реализацию фиксированных столбцов с использованием стиля sticky , что значительно снизило потребление производительности, когда форма имеет фиксированные столбцы. Для IE 11, который не поддерживает sticky , мы выполняем обработку перехода на более раннюю версию.

В то же время мы предоставляем новый summary API для достижения эффекта итоговой строки:

Сортировщик предоставляет функцию сортировки по нескольким столбцам:

Кроме того, мы скорректировали базовую логику, чтобы теперь можно было смешивать fixedColumn , expandable и scroll . Предоставляет body API для настройки реализаций содержимого таблицы, из которого вы можете реализовать такие эффекты, как виртуальная прокрутка.

Новые DatePicker, TimePicker и Календарь

Мы полностью переписали компонент даты, чтобы отделить его от moment . Вы можете создавать компоненты Picker для пользовательских библиотек дат, используя предоставляемый нами метод generate . Для обеспечения совместимости компонент Picker по умолчанию по-прежнему использует moment в качестве библиотеки дат. Пожалуйста, обратитесь сюда за пользовательской библиотекой дат.

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

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

Для селектора диапазона мы также оптимизировали взаимодействие. Теперь вы можете выбрать время начала или окончания индивидуально, и это идеально оптимизирует ручной ввод даты.

Уведомления / Обработчики модальной поддержки

В прошлом вы могли столкнуться с проблемой, что методы вызова Modal.xxx и Notification.xxx не могут получить Context. Это связано с тем, что мы дополнительно создадим экземпляр React через ReactDOM.render для этих синтаксических сахаров, что также вызовет проблему потери контекста. В новой версии мы предоставляем метод хуков, который позволяет вам внедрять узлы, где вам нужно получить контекст:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Виртуальная прокрутка

В версии 4 мы обновили Tree, TreeSelect и Select. По умолчанию они используют технологию виртуальной прокрутки, чтобы оптимизировать свою производительность для выполнения большого количества опций рендеринга.

Живая демонстрация

Кроме того, оптимизированы взаимодействие с клавиатурой и специальные возможности.

Больше новых функций / функций / оптимизаций

• ConfigProvider предоставляет конфигурацию direction для поддержки интернационализации языка rtl .
• Form и ConfigProvider поддерживают настройку size включая размер компонента.
• Типографика добавляет атрибут suffix .
• Progress добавляет подкомпонент steps .
• TextArea поддерживает onResize .
• Сетка использует макет flex .
• ......

Вы можете щелкнуть здесь, чтобы увидеть полный журнал обновлений.

Как обновить

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

Превыше всего

Рождение Ant Design 4.0 неотделимо от вклада и поддержки волонтеров сообщества. Спасибо @saeedrahimi за интернационализацию rtl , вклад @shaodahong в пакеты совместимости и всех, кто участвует в разработке. Ваш вклад в открытый исходный код делает Ant Design еще лучше!

Официальная версия Ant Design 4.0 уже здесь!

введение

Мы выпустили версию 4.0 rc по случаю SEE Conf. После более чем месяца сбора и корректировки отзывов мы наконец-то представили официальную версию 4.0! Спасибо всем, кто предоставил отзывы, предложения и вклад в этот период. Мы перечислим обновления, уже включенные в версию rc и некоторые из наиболее важных новых дополнений здесь. Полный обновленный документ можно найти здесь . адрес документа v4: https://ant.design

Следует отметить, что версия v3 была объединена с веткой 3.x-stable в декабре 2019 года и перешла в состояние обслуживания. Мы будем поддерживать версию v3 еще полгода. Крайний срок обслуживания - май 2020 г.

Обновление проектной спецификации

Мы изменили базовое филе с 4px до 2px . Для промежуточных и серверных продуктов эффективность является главным приоритетом, а стиль закругленных углов является важной деталью пользовательского интерфейса. Меньшие закругленные углы визуально уменьшают детализацию интерфейса и повышают эффективность чтения информации. Кроме того, мы скорректировали тень, чтобы она больше соответствовала реальной тени и в то же время лучше отражала информационный уровень.

Темная тема

Мы обновили цветовую систему на основе версии v3, а v4 предоставляет темную тему. Вы можете щелкнуть функцию переключения темы на странице, чтобы просмотреть эффект темной темы:

Компоненты без полей

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

Регулировка совместимости

Ant Design 3.0 приложил много усилий для обеспечения совместимости со старой версией IE. Однако, согласно отраслевой статистике, как глобальная, так и внутренняя доля браузера IE9 / 10 сокращается с обновлением системы Windows. Мы находимся в версии 4.0 и прекращаем поддержку IE 9/10 (но по-прежнему будем поддерживать IE 11). Следовательно, некоторые ранее использовавшиеся низкопроизводительные компоненты также получат повышение производительности благодаря новым функциям CSS.

В то же время мы также обновили минимальную версию React, от которой зависит v4, до React 16.9. Это означает, что версия v4 предоставит больше ловушек для упрощения вашего кода.

Кроме того, мы также удалили некоторые устаревшие API, о которых предупреждалось в версии v3. Мы настоятельно рекомендуем вам обновить текущий проект до последней версии v3 и обновить устаревший API на основе информации предупреждения.

Меньший размер

В [email protected] мы представили значок svg ( зачем использовать значок svg? ). API значков, использующий строковое именование, не может быть загружен по запросу, поэтому полностью представлен файл значков svg, что значительно увеличивает размер упакованного продукта. В 4.0 мы скорректировали API использования значков для поддержки встряхивания дерева и уменьшили размер пакета antd по умолчанию примерно на 150 КБ (Gzip).

Старая версия использования Icon будет устаревшей:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

В 4.0 будет принят метод внедрения по требованию:

import { Button } from 'antd';

// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

Кроме того, мы также оптимизировали связанные зависимости, чтобы уменьшить размер упаковки (Gzip):

Компонент повторить

Повторить форму

Форма - это часто используемый компонент, и его API немного избыточен. Пользователь должен получить экземпляр формы с помощью метода HOC Form.create и использовать form.getFieldDecorator для привязки данных к компоненту. Кроме того, вся форма будет перерисовываться каждый раз при изменении данных, что вызывает беспокойство по поводу производительности в форме больших данных. В версии v4 Form будет иметь собственный экземпляр формы, и вы можете напрямую выполнять привязку данных через свойство name объекта Form.Item, чтобы упростить код:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

Мы обнаружили, что в большинстве сценариев разработчики обращают внимание только на ценность отправки формы. Поэтому мы предоставляем onFinish , который будет активирован только после проверки формы, и validateFields больше не требуется.

Кроме того, Form предоставляет метод хуков Form.useForm позволяющий управлять примером формы:

const [form] = Form.useForm();

React.useEffect(() => {
    form.setFieldValues({ ... });
});

<Form form={form} />

В то же время мы предоставляем компонент Form.List, чтобы вы могли легко управлять полями списка:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

Повтор таблицы

Поскольку мы повысили минимальные требования к совместимости, мы перешли на использование стиля sticky для реализации фиксированных столбцов, что значительно снизило потребление производительности, когда форма имеет фиксированные столбцы. Для IE 11, который не поддерживает sticky , мы понизим его версию.

В то же время мы предоставляем новый summary API для достижения эффекта итоговой строки:

Сортировщик предоставляет функцию сортировки по нескольким столбцам:

Кроме того, мы скорректировали базовую логику, и теперь можно смешивать fixedColumn , expandable , scroll . API body предоставляется для реализации настраиваемого содержимого таблицы, поэтому вы можете добиться таких эффектов, как виртуальная прокрутка.

Новые DatePicker, TimePicker и Календарь

Мы полностью переписали компонент даты, отделив его от moment . Вы можете создать компонент Picker пользовательской библиотеки дат с помощью предоставляемого нами метода generate . Для обеспечения совместимости компонент Picker по умолчанию по-прежнему использует moment в качестве библиотеки дат. Пожалуйста, обратитесь сюда за пользовательской библиотекой дат.

Кроме того, мы предоставляем полный набор селекторов времени, даты, недели, месяца и года, а также соответствующих селекторов диапазона. Вы можете использовать свойство picker чтобы установить его, больше не нужно использовать управляемый метод mode для реализации специального селектора:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

В селекторе диапазонов мы также оптимизировали взаимодействие. Теперь вы можете выбрать время начала или окончания индивидуально, а возможность ручного ввода даты идеально оптимизирована.

Уведомление / модальное окно предоставляет хуки

В предыдущей версии вы могли столкнуться с проблемой, что методы вызова Modal.xxx и Notification.xxx не могут получить Context. Это связано с тем, что мы дополнительно создадим экземпляр React через ReactDOM.render для этих синтаксических сахаров, что также приведет к проблеме потери контекста. В новой версии мы предоставляем метод хуков, позволяющий вставлять узлы в то место, где вам нужно получить контекст:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Виртуальная прокрутка

В версии 4 мы модифицировали Tree, TreeSelect и Select, которые используют технологию виртуальной прокрутки для оптимизации производительности по умолчанию для переноса больших объемов данных для рендеринга параметров.

Живая демонстрация

Кроме того, были оптимизированы взаимодействие с клавиатурой и доступность.

Больше новых функций / возможностей / частей оптимизации

• ConfigProvider предоставляет конфигурацию direction для поддержки интернационализации языка rtl .
• Form и ConfigProvider поддерживают size установки размера включенного компонента.
• Типографика добавляет атрибуты suffix .
• Progress добавляет steps дочерних компонентов.
• TextArea поддерживает onResize .
• Сетка использует макет flex .
• ......

Вы можете щелкнуть здесь, чтобы просмотреть полный журнал обновлений.

Как обновить

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

выше

Рождение Ant Design 4.0 неотделимо от вклада и поддержки волонтеров сообщества. Спасибо @saeedrahimi за реализацию функции интернационализации rtl , вклад @shaodahong в пакет совместимости и всех, кто участвовал в разработке. Ваш вклад в открытый исходный код делает Ant Design еще лучше!