赶上二月的尾巴，Ant Design 4.0 正式版发布了，平时这款 UI 框架用的比较多，先来看看相比 3.x 版本有什么大的变化。
本文只会对更新内容中作者平时用的比较多的特性进行整理，详情见官文地址、更新日志

目录

更新指南
兼容性调整
设计规范调整
重要变化！！！
其他细节

更新指南

手动逐条检查代码进行修改。
codemod cli 工具 @ant-design/codemod-v4 帮助快速升级到 v4 版本
- 在运行 codemod cli 前，请先提交你的本地代码修改。
```
# 通过 npx 直接运行
npx -p @ant-design/codemod-v4 antd4-codemod src

# 或者全局安装
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

# 运行
antd4-codemod src
```
- 对于无法自动修改的部分，codemod 会在命令行进行提示，建议按提示手动修改。修改后可以反复运行上述命令进行检查。

兼容性调整

由于 IE 在全球的市场份额在逐年降低，它的兼容性问题更是在业界臭名昭著，这次更新仅 支持到 IE11（莫名开心）
React 最低支持版本为 React 16.9，部分组件开始使用 hooks（不了解的可以去学习学习了，比写class组件舒服太多了）进行重构

设计规范调整

行高从 1.5(21px) 调整为 1.5715(22px)
圆角调整，由4px 改为 2px
全局阴影优化，调整为三层阴影区分控件层次关系
一些颜色的调整

重要变化！！！

图标的使用升级

现在图标可以按需引入，图标组件均从@ant-design/icons中引入：

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

减少 antd 默认包体积约 150 KB(Gzipped)

Form 重做

后台管理系统必备组件，一直以来Form组件的功能很强大，但是上手却并不简单，API 也略显冗余（一直都通过form.getFieldDecorator来绑定控件的方式很麻烦），而且每次数据变更便会进行整个表单的重新渲染，这使得在大数据表单中性能堪忧。

简化了很多，降低了学习难度，代码量也变少了，性能也提高了，五星好评。

getFieldDecorator 不再需要。直接在 Form.Item 上通过name属性绑定表单控件值，其他选项也直接写进 Form.Item
Form.create()不再需要。不再需要通过这种方式往组件中注入 Form 实例
- 现在通过 Form.useForm() 创建 Form 实体 const [form] = Form.useForm()
- 对于 class component，也可以通过 ref 获得实体formRef = React.createRef(); <Form ref={formRef}>
新版 Form 采用增量更新方式，仅会更新需要更新的字段。
- 如果一个 Form.Item 设置了 dependencies 依赖属性。那么它所依赖的 Form.Item 更新时，该 Form.Item 将自动触发更新与校验（如密码更改后需要触发确认密码的检验）；
- 如果一个字段设置 shouldUpdate 属性为 true，那么 Form 的任意变化都会使该 Form.Item 重新渲染，这个属性还可以传入一个方法，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。
onFinish 替代 onSubmit。过去版本需要通过监听 onSubmit 事件手工触发 validateFields。新版直接使用 onFinish 事件，该事件 仅当校验通过后才会执行

scrollToField 替代 validateFieldsAndScroll。

onFinishFailed = ({ errorFields }) => {
  form.scrollToField(errorFields[0].name);
};

initialValue 从字段中移到 Form 中。传入对象，统一管理。
validateFields不再支持 callback，现返回 Promise 对象。不再需要判断 errors 是否为空。

提供了 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，采取降级处理。

在没有 columns 时仍然会保留一列
新的 summary API 用于实现总结行的效果。可以更加灵活的实现表格数据的整体处理。官方例子

sorter现在可以通过multiple设置多列排序的优先级，通过compare设置排序逻辑

//columns中
sorter: {
    compare: (a, b) => a.math - b.math,
    multiple: 2,
},

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

DatePicker 重写

与 moment 进行解耦（仍默认使用），可以使用自定义日期库替换：官方说明
面板和输入框分离
提供了全套的时间、日期、周、月、年选择器以及对应的范围选择器。可以通过 picker 属性进行设置，不再需要通过 mode 的受控方法来实现特地的选择器
可以单独的选择开始或结束时间。之前的版本是范围选择必须开始时间和结束时间一起选，体验很不好。
范围选择中间的～变成了 ->

Progress 增加 steps 子组件

可以给进度条带上步骤，挺有意思的特性，感觉以后会常用。

其他细节

文档右下角新增 切换暗色主题 的悬浮按钮（相当护眼）
为一些选择器组件增加了 无边框 样式，如 DatePicker、Select
各种组件 属性名的移除 以及替换方案
- 移除了 LocaleProvider，请使用 ConfigProvider 替代。
- 移除了 Mention，请使用 Mentions 替代。
嵌套字段路径使用数组诸如 user.name 来代表 { user: { name: '' } }，现在改为['user', 'name']
将 Tree、TreeSelect、Select 进行了改造，默认使用 虚拟滚动技术 进行性能优化以承载大数据量的选项渲染
Notification/Modal 提供 Hooks 解决 context 丢失的问题 Modal.useModal()、notification.useNotification()
兼容包 @ant-design/compatible 包含一些已经废弃的老版本组件