前言

Ant Design 4.0.0-rc.0 发布了。Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React 实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系。

特性

4.0.0-rc.0 新增功能

• Form 组件自带数据绑定功能。
• 字段值改动只会影响相关组件的渲染而非整个 Form。
• 新增 initialValues 以代替原 field 初始化字段。
• 新增 validateMessages 以支持修改校验模板。
• 新增 onFinish 与 onFinishFailed 完成整体组件校验逻辑。
• 新增 onFieldsChange 与 onValuesChange 以用于受控状态触发。
• 提供 useForm 的 hook 支持。
• Form.Item 新增 name 属性以进行数据绑定。
• Form.Item validateTrigger 将只进行校验触发而不会同时收集字段值。
• Form.Item 新增 rules 属性以进行数据校验。
• Form.Item 新增 shouldUpdate 属性以支持 render props。
• Form.Item 新增 dependencies 属性以简化相关字段更新逻辑。
• Form.Item 新增 noStyle 属性以及添加无样式数据绑定。
• 新增 Form.List 组件以简化增删改查操作。
• 新增 Form.Provider 组件以支持多表联动。

• 添加 summary 支持总结行。
• 现在 fixedColumn、expandable、scroll 可以混合使用。
• 支持多列排序。
• 支持自定义 body 并添加虚拟滚动例子。
• 使用 css sticky 实现固定效果以优化性能。
• 优化 expand 动画效果。

• 支持自定义日期库。
• 添加 picker 支持设置选择器（不再需要通过受控 mode 模拟选择器）。
• 全范围选择器支持：时间、日期、周、月、年。
• 范围选择器现在可以单独选择开始与结束时间。
• 范围选择器可以为开始与结束时间单独设置 disabled。
• 范围选择器可以允许开始与结束时间为空。
• 优化键盘支持。

• 支持 Skeleton.Avatar 占位组件。#19898 @Rustin-Liu
• 支持 Skeleton.Button 占位组件。#19699 @Rustin-Liu
• 支持 Skeleton.Input 占位组件。#20264 @Rustin-Liu

代码示例

var antd = require('antd');

var Datepicker = antd.Datepicker;

React.render(<Datepicker />, mountNode);

点评

优势：

1、Ant Design是基于react开发的一个解放ui和前端的工具，它提供了一致的设计方便我们快速开发和减少不必要的设计与代码，很多实用react框架的开发者都已经在使用ant.design了，且其在github上的star数也早已上万，社区也非常活跃。

2、全中文文档，在阿里久经考验，有大量实践和参考页面。

3、提供Axure控件包，输出多角色复杂的大型系统时候，需要模拟每个使用角色的所有页面，这时效率非常高。能给前端开发和测试人员节省大量时间。结合新的需求书写方式，测试人员只需看交互技能快速理解所有功能，开发测试用例。

4、适合中国大陆地区的排版样式和习惯。

不足：

1、样式模板比较单一（本次更新增加了黑色主题）。

2、去年的圣诞节彩蛋，相信大家都没有忘记。