Ant Design 4.0 is out!

Ant Design 4.0 is out!

Introduction

We released the 4.0 rc version on SEE Conf. After more than a month of feedback collection and adjustment, it time to release 4.0! Thanks to everyone who provided feedback, suggestions, and contributions during this period. We will combine the updates already involved in the rc version and some update recently here. The complete updated documentation can be found here . v4 document address: https://ant.design

It should be noted that the v3 version merged into the 3.x-stable branch in December 2019 and went into maintenance. We will still perform half-year maintenance work for the v3 version. Maintenance deadline is May 2020.

Design specification upgrade

We have adjusted the base rounded corners from 4px to 2px . The fillet itself is a detail, and in the middle and background scenes, we take efficiency as the first priority, so we reduce the visual details of the interface and improve the efficiency of interface information reading. In addition, we have adjusted the shadows to make them more consistent with real shadows, while also emphasizing the information hierarchy.

Dark theme

We have upgraded the color system based on the v3 version, and v4 provides a dark theme. You can click the switch theme function on the page to see the dark theme effect:

Borderless component

In the daily work, we found that there are lightweight selection components in some scenarios. So we provide a new borderless style that allows developers to more easily embed these components without overriding the style.

Compatibility adjustment

Ant Design 3.0 has made a lot of efforts to be compatible with older versions of IE. However, according to industry statistics, both the global and domestic IE9 / 10 browsers are shrinking with Windows system updates. We stopped supporting IE 9/10 at 4.0 (but will still support IE 11). Therefore, some low-performance components in the past will also gain performance with the new css features.

At the same time, we also upgraded the minimum version of React that v4 depends on to React 16.9. This means that the v4 version will provide more hooks to simplify your code.

In addition, we have removed some obsolete APIs that were warned in the v3 release. We strongly recommend that you upgrade your current project to the last version of v3 and update the deprecated API based on the warning message.

Smaller size

In antd @ 3.9.0 , we introduced the svg icon (Why use the svg icon?). The icon API using the string name cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 4.0, we adjusted the icon usage API to support tree shaking, reducing the default package size of Antant by about 150 KB (Gzipped).

Legacy Icon usage will be discarded:

import { Icon, Button } from 'antd';

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

In 4.0, it will be introduced on demand:

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';

In addition, we have also removed some related dependencies to reduce gzipped bundle size:

Component rewrite

Form rewrite

Form, as a high-frequency component, has a slightly redundant API. The user needs to obtain the form instance through the HOC of Form.create, and use form.getFieldDecorator to perform data binding on the component. In addition, the entire form is re-rendered every time the data changes, which makes performance worrying in big data forms. In the v4 version, Form will come with a form instance. You can directly bind data through the name property of Form.Item, thereby simplifying your code:

- 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>

We found that in most scenarios, the developer is actually only concerned with the values that the form submits successfully. So we provide onFinish , which will only fire after the form validation passes, and validateFields are no longer needed.

Besides, Form provides the hooks method Form.useForm to allow you to control the form example:

const [form] = Form.useForm();

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

<Form form={form} />

At the same time, we provide the Form.List component, so that you can easily control the list fields:

<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>

Table rewrite

Because we have adjusted the minimum requirements for compatibility, we have changed to the implementation of fixed columns using the sticky style, thereby greatly reducing the performance consumption when the form has fixed columns. For IE 11 that does not support sticky , we take downgrade processing.

At the same time, we provide a new summary API to achieve the effect of the summary line:

The sorter provides a multi-column sorting function:

In addition, we adjusted the underlying logic so that fixedColumn , expandable and scroll can now be mixed. Provides a body API for customizing table content implementations, from which you can implement effects such as virtual scrolling.

New DatePicker, TimePicker and Calendar

We have rewritten the date component as a whole to decouple it from moment . You can generate Picker components for custom date libraries using the generate method we provide. To maintain compatibility, the default Picker component still uses moment as the date library. Please refer to here for custom date library.

In addition, we provide a full set of time, date, week, month, year selectors and corresponding range selectors. You can set it through the picker property, instead of implementing the special selector through the controlled method of mode:

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

For range selector, we have also optimized the interaction. You can now select the start or end time individually, and it perfectly optimizes the manual date entry experience.

Notification/Modal support Hooks

In the past, you may have encountered the problem that Modal.xxx and Notification.xxx call methods cannot get Context. This is because we will additionally create a React instance through ReactDOM.render for these syntactic sugars, which also causes the problem of context loss. In the new version, we provide the hooks method, which allows you to inject nodes where you need to get the context:

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>
);

Virtual scroll

In v4, we have upadated Tree, TreeSelect, and Select. By default, they use virtual scrolling technology to optimize their performance to carry a large amount of option rendering.

Living demo

In addition, keyboard interaction and accessibility are optimized.

More new features / features / optimizations

• ConfigProvider provides direction configuration to support rtl language internationalization.
• Form and ConfigProvider support size setting including component size.
• Typography adds suffix attribute.
• Progress adds steps subcomponent.
• TextArea supports onResize .
• Grid uses flex layout.
• ......

You can click here to see the full update log.

How to upgrade

To make the upgrade as easy as possible, we maintain maximum compatibility. But there are still some breaking changes that need attention. You can first try to migrate using the codemod tool provided by us, and manually migrate some parts that cannot be migrated. Please refer to the document for upgrading.

Above all

The birth of Ant Design 4.0 is inseparable from the contributions and support of community volunteers. Thanks to @saeedrahimi for the internationalization of rtl , [ @shaodahong ](https: / /github.com/shaodahong) Contributions to Compatibility Packs, and everyone involved in helping development. It is your contribution to open source that makes Ant Design even better!

Ant Design 4.0 正式版来了！

引言

我们在 SEE Conf 之际发布了 4.0 rc 版本。经过 1 个多月的反馈收集和调整之后，我们终于迎来了 4.0 的正式版！感谢在此期间每一位提供反馈、建议以及贡献的人。我们会结合 rc 版本已经涉及的更新以及一些比较重要的新增内容于此进行列举。完整的更新文档可以 点击此处 。v4 文档地址： https://ant.design

需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并进入维护状态。我们仍然会为 v3 版本进行半年的维护工作。维护截止日期为 2020 年 5 月。

设计规范升级

我们将基础圆角由 4px 调整为 2px 。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。此外，我们对阴影进行了调整，使其更符合真实阴影，也同时将信息层级更好体现。

暗色主题

我们基于 v3 版本的色彩系统进行了升级，v4 提供了暗色主题。你可以在页面中点击切换主题功能查看暗色主题效果：

无边框组件

在业务中，我们发现有些场景会存在轻量级的选择组件。因而我们提供了一种新的无边框样式，让开发者可以更简单的嵌入这些组件而不用额外覆盖样式。

兼容性调整

Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。然而根据业界统计，IE9/10 浏览器无论是在全球还是在国内份额都在随着 Windows 系统更新而在不断缩减。我们在 4.0 版本，停止对 IE 9/10 的支持工作（但仍然会支持 IE 11）。因而过去一些低性能的组件，也会随着新的 css 特性而获得性能提升。

与此同时，我们也将 v4 依赖的 React 最低版本要求升级到了 React 16.9。这意味着，v4 版本将会提供更多的 hooks 以简化你的代码。

此外，我们也将在 v3 版本警告的一些废弃 API 进行了移除。我们强烈建议你将当前项目升级到 v3 的最后一个版本，并根据 warning 信息将废弃 API 进行更新。

更小的尺寸

在 antd@3.9.0 中，我们引入了 svg 图标（ 为何使用 svg 图标？ ）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。

旧版 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';

此外，我们也对相关依赖进行了精简，从而降低打包尺寸（Gzipped）：

组件重做

Form 重做

Form 作为高频使用的组件，其 API 略显冗余。用户需要通过 Form.create 的 HOC 方式获得表单实例，而通过 form.getFieldDecorator 来对组件进行数据绑定。此外，每次数据变更便会进行整个表单的重新渲染，这使得在大数据表单中性能堪忧。在 v4 版本中，Form 将自带表单实例，你可以直接通过 Form.Item 的 name 属性进行数据绑定，从而简化你的代码：

- 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 提供了 hooks 方法 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>

Table 重做

由于我们提升了兼容性的最低要求，我们改成使用 sticky 样式进行固定列的实现，因而大大减少了表单拥有固定列时的性能消耗。而对于不支持 sticky 的 IE 11，我们采取降级处理。

同时，我们提供了新的 summary API 用于实现总结行的效果：

对于 sorter 提供了多列 排序 的功能：

此外，我们调整了底层逻辑，现在 fixedColumn 、 expandable 、 scroll 可以混合使用。提供了 body API 用于自定义表格内容实现，你可以由此实现诸如虚拟滚动的效果。

全新 DatePicker、 TimePicker 与 Calendar

我们对日期组件进行了整体重写，因而将其与 moment 进行解耦。你可以通过我们提供的 generate 方法生成自定义日期库的 Picker 组件。为了保持兼容，默认的 Picker 组件仍然使用 moment 作为日期库。自定义日期库请参考 此处 。

此外，我们提供了全套的时间、日期、周、月、年选择器以及对应的范围选择器。你可以通过 picker 属性进行设置，不再需要通过 mode 的受控方法来实现特地的选择器：

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

在范围选择器上，我们也对交互进行了优化。你现在可以单独的选择开始或结束时间，并且完美优化了手动输入日期的体验。

Notification/Modal 提供 Hooks

在过去版本，你或许会遇到 Modal.xxx 和 Notification.xxx 调用方法无法获得 Context 的问题。这是由于我们对于这些语法糖会额外通过 ReactDOM.render 创建一个 React 实例，这也导致了 context 丢失的问题。在新版中，我们提供了 hooks 方法，让你可以将节点注入到需要获得 context 的地方：

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>
);

虚拟滚动

v4 中，我们将 Tree、TreeSelect、Select 进行了改造，其默认使用虚拟滚动技术进行性能优化以承载大数据量的选项渲染。

Living demo

此外，也对键盘交互以及无障碍进行了优化。

更多新功能/特性/优化部分

• ConfigProvider 提供 direction 配置以支持 rtl 语言国际化。
• Form 与 ConfigProvider 支持 size 设置包含组件尺寸。
• Typography 增加 suffix 属性。
• Progress 增加 steps 子组件。
• TextArea 支持 onResize 。
• Grid 使用 flex 布局。
• ......

你可以点击 此处 查看完整更新日志。

如何升级

为了尽可能简化升级，我们保持了最大兼容。但是仍然有一部分 breaking change 需要注意。你可以首先尝试使用我们提供的 codemod 工具进行迁移，对部分无法迁移的内容进行手工迁移。升级请参考 该文档 。

以上

Ant Design 4.0 的诞生离不开社区志愿者的贡献与支持，感谢 @saeedrahimi 实现了 rtl 的国际化功能， @shaodahong 对于兼容包的贡献，以及每个参与帮助开发的人。是你们为开源的贡献让 Ant Design 变得更加美好！