2月28日，廣受開發者歡迎的前端開源項目Ant Design釋出4.0正式版本。這是兩年多以來的首次釋出的裡程碑版本。
大家可以可以通路
ant.design了解更多資訊，或在GitHub上關注Ant Design項目。
需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并進入維護狀态。我們仍然會為 v3 版本進行半年的維護工作。維護截止日期為 2020 年 5 月。
設計規範更新
我們将基礎圓角由 4px 調整為 2px。中背景産品以效率為第一優先級，圓角樣式作為 UI 上的重要細節，更小的圓角從視覺上減少界面細節，提升了資訊閱讀效率。此外，我們對陰影進行了調整，使其更符合真實陰影，也同時将資訊層級更好展現。
暗色主題
我們基于 v3 版本的色彩系統進行了更新，v4 提供了暗色主題。你可以在頁面中點選切換主題功能檢視暗色主題效果：
無邊框元件
在業務中，我們發現有些場景會存在輕量級的選擇元件。因而我們提供了一種新的無邊框樣式，讓開發者可以更簡單的嵌入這些元件而不用額外覆寫樣式。
相容性調整
Ant Design 3.0 為了相容舊版 IE 做出了非常多的努力。然而根據業界統計，IE9/10 浏覽器無論是在全球還是在國内份額都在随着 Windows 系統更新而在不斷縮減。我們在 4.0 版本，停止對 IE 9/10 的支援工作（但仍然會支援 IE 11）。因而過去一些低性能的元件，也會随着新的 css 特性而獲得性能提升。
與此同時，我們也将 v4 依賴的 React 最低版本要求更新到了 React 16.9。這意味着，v4 版本将會提供更多的 hooks 以簡化你的代碼。
此外，我們也将在 v3 版本警告的一些廢棄 API 進行了移除。我們強烈建議你将目前項目更新到 v3 的最後一個版本，并根據 warning 資訊将廢棄 API 進行更新。
更小的尺寸
在 [email protected] 中，我們引入了 svg 圖示。使用了字元串命名的圖示 API 無法做到按需加載，因而全量引入了 svg 圖示檔案，這大大增加了打包産物的尺寸。在 4.0 中，我們調整了圖示的使用 API 進而支援 tree shaking，減少 antd 預設包體積約 150 KB(Gzipped)。
舊版 Icon 使用方式将被廢棄，4.0 中會采用按需引入的方式。此外，我們也對相關依賴進行了精簡，進而降低打包尺寸（Gzipped）：
元件重做
Form 重做
Form 作為高頻使用的元件，其 API 略顯備援。使用者需要通過 Form.create 的 HOC 方式獲得表單執行個體，而通過 form.getFieldDecorator 來對元件進行資料綁定。此外，每次資料變更便會進行整個表單的重新渲染，這使得在大資料表單中性能堪憂。在 v4 版本中，Form 将自帶表單執行個體，你可以直接通過 Form.Item 的 name 屬性進行資料綁定，進而簡化你的代碼。
我們發現大多數場景下，開發者其實隻關注表單送出成功的值。因而我們提供了 onFinish ，其隻會在表單驗證通過後觸發，而 validateFields 不在需要。
此外，Form 提供了 hooks 方法 Form.useForm 允許你對表單示例進行控制。
Table 重做
由于我們提升了相容性的最低要求，我們改成使用 sticky 樣式進行固定列的實作，因而大大減少了表單擁有固定列時的性能消耗。而對于不支援 sticky 的 IE 11，我們采取降級處理。
同時，我們提供了新的 summary API 用于實作總結行的效果：
對于 sorter 提供了多列排序的功能：
此外，我們調整了底層邏輯，現在 fixedColumn、expandable、scroll 可以混合使用。提供了 body API 用于自定義表格内容實作，你可以由此實作諸如虛拟滾動的效果。
全新 DatePicker、 TimePicker 與 Calendar
我們對日期元件進行了整體重寫，因而将其與 moment 進行解耦。你可以通過我們提供的 generate 方法生成自定義日期庫的 Picker 元件。為了保持相容，預設的 Picker 元件仍然使用 moment 作為日期庫。
此外，我們提供了全套的時間、日期、周、月、年選擇器以及對應的範圍選擇器。你可以通過 picker 屬性進行設定，不再需要通過 mode 的受控方法來實作特地的選擇器。
在範圍選擇器上，我們也對互動進行了優化。你現在可以單獨的選擇開始或結束時間，并且完美優化了手動輸入日期的體驗。
Notification/Modal 提供 Hooks
在過去版本，你或許會遇到 Modal.xxx 和 Notification.xxx 調用方法無法獲得 Context 的問題。這是由于我們對于這些文法糖會額外通過 ReactDOM.render 建立一個 React 執行個體，這也導緻了 context 丢失的問題。在新版中，我們提供了 hooks 方法，讓你可以将節點注入到需要獲得 context 的地方。
虛拟滾動
v4 中，我們将 Tree、TreeSelect、Select 進行了改造，其預設使用虛拟滾動技術進行性能優化以承載大資料量的選項渲染。
Living demo：
https://ant.design/components/select-cn/#components-select-demo-big-data此外，也對鍵盤互動以及無障礙進行了優化。
更多新功能/特性/優化部分
- ConfigProvider 提供 direction 配置以支援 rtl 語言國際化。
- Form 與 ConfigProvider 支援 size 設定包含元件尺寸。
- Typography 增加 suffix 屬性。
- Progress 增加 steps 子元件。
- TextArea 支援 onResize。
- Grid 使用 flex 布局。
- ......
如何更新
為了盡可能簡化更新，我們保持了最大相容。但是仍然有一部分 breaking change 需要注意。你可以首先嘗試使用我們提供的 codemod 工具進行遷移，對部分無法遷移的内容進行手工遷移。更新請參考官方文檔。
以上
Ant Design 4.0 的誕生離不開社群志願者的貢獻與支援，感謝 @saeedrahimi 實作了 rtl 的國際化功能，@shaodahong 對于相容包的貢獻，以及每個參與幫助開發的人。是你們為開源的貢獻讓 Ant Design 變得更加美好！