前言
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、去年的聖誕節彩蛋，相信大家都沒有忘記。