Ant Design 4.0 正式版初探

5,090 阅读5分钟

赶上二月的尾巴,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 样式进行固定列的实现,因而大大减少了表单拥有固定列时的性能消耗。而对于不支持 stickyIE 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 包含一些已经废弃的 老版本组件