赶上二月的尾巴,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
包含一些已经废弃的 老版本组件