前言

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

代碼示例

<code>varantd=require('antd');/<code>

<code>varDatepicker=antd.Datepicker;/<code>

<code>React.render(<datepicker>,mountNode);/<code>

點評

優勢：

1、Ant Design是基於react開發的一個解放ui和前端的工具，它提供了一致的設計方便我們快速開發和減少不必要的設計與代碼，很多實用react框架的開發者都已經在使用ant.design了，且其在github上的star數也早已上萬，社區也非常活躍。

2、全中文文檔，在阿里久經考驗，有大量實踐和參考頁面。

3、提供Axure控件包，輸出多角色複雜的大型系統時候，需要模擬每個使用角色的所有頁面，這時效率非常高。能給前端開發和測試人員節省大量時間。結合新的需求書寫方式，測試人員只需看交互技能快速理解所有功能，開發測試用例。

4、適合中國大陸地區的排版樣式和習慣。

不足：

1、樣式模板比較單一（本次更新增加了黑色主題）。

2、去年的聖誕節彩蛋，相信大家都沒有忘記。

閱讀更多 IT實戰聯盟 的文章

關鍵字: CSS TypeScript 企業級