Ant Design 4.0.0-rc.0 發(fā)布，打包尺寸降低50%并增加黑色主題（ant design upload）
前言
Ant Design 4.0.0-rc.0 發(fā)布了。Ant Design 是阿里開源的一套企業(yè)級的 UI 設(shè)計語言和 react 實現(xiàn)，使用 TypeScript 構(gòu)建，提供完整的類型定義文件，自帶提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格、開箱即用的高質(zhì)量 React 組件與全鏈路開發(fā)和設(shè)計工具體系。
特性
4.0.0-rc.0 新增功能
- Form 組件自帶數(shù)據(jù)綁定功能。
- 字段值改動只會影響相關(guān)組件的渲染而非整個 Form。
- 新增 initialValues 以代替原 field 初始化字段。
- 新增 validateMessages 以支持修改校驗?zāi)０濉?/li>
- 新增 onFinish 與 onFinishFailed 完成整體組件校驗邏輯。
- 新增 onFieldsChange 與 onValuesChange 以用于受控狀態(tài)觸發(fā)。
- 提供 useForm 的 hook 支持。
- Form.Item 新增 name 屬性以進行數(shù)據(jù)綁定。
- Form.Item validateTrigger 將只進行校驗觸發(fā)而不會同時收集字段值。
- Form.Item 新增 rules 屬性以進行數(shù)據(jù)校驗。
- Form.Item 新增 shouldUpdate 屬性以支持 render props。
- Form.Item 新增 dependencies 屬性以簡化相關(guān)字段更新邏輯。
- Form.Item 新增 noStyle 屬性以及添加無樣式數(shù)據(jù)綁定。
- 新增 Form.List 組件以簡化增刪改查操作。
- 新增 Form.Provider 組件以支持多表聯(lián)動。
- 添加 summary 支持總結(jié)行。
- 現(xiàn)在 fixedColumn、expandable、scroll 可以混合使用。
- 支持多列排序。
- 支持自定義 body 并添加虛擬滾動例子。
- 使用 css sticky 實現(xiàn)固定效果以優(yōu)化性能。
- 優(yōu)化 expand 動畫效果。
- 支持自定義日期庫。
- 添加 picker 支持設(shè)置選擇器（不再需要通過受控 mode 模擬選擇器）。
- 全范圍選擇器支持：時間、日期、周、月、年。
- 范圍選擇器現(xiàn)在可以單獨選擇開始與結(jié)束時間。
- 范圍選擇器可以為開始與結(jié)束時間單獨設(shè)置 disabled。
- 范圍選擇器可以允許開始與結(jié)束時間為空。
- 優(yōu)化鍵盤支持。
- 支持 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);
點評
優(yōu)勢：
1、Ant Design是基于react開發(fā)的一個解放ui和前端的工具，它提供了一致的設(shè)計方便我們快速開發(fā)和減少不必要的設(shè)計與代碼，很多實用react框架的開發(fā)者都已經(jīng)在使用ant.design了，且其在github上的star數(shù)也早已上萬，社區(qū)也非?；钴S。
2、全中文文檔，在阿里久經(jīng)考驗，有大量實踐和參考頁面。
3、提供Axure控件包，輸出多角色復雜的大型系統(tǒng)時候，需要模擬每個使用角色的所有頁面，這時效率非常高。能給前端開發(fā)和測試人員節(jié)省大量時間。結(jié)合新的需求書寫方式，測試人員只需看交互技能快速理解所有功能，開發(fā)測試用例。
4、適合中國大陸地區(qū)的排版樣式和習慣。
不足：
1、樣式模板比較單一（本次更新增加了黑色主題）。
2、去年的圣誕節(jié)彩蛋，相信大家都沒有忘記。
