Ant Design 4.0 正式版來(lái)了:Form、Table 重做,Icon 體積更小

原文鏈接：https://zhuanlan.zhihu.com/p/109633620

引言

我們?cè)?SEE Conf 之際發(fā)布了 4.0 rc 版本。經(jīng)過(guò) 1 個(gè)多月的反饋收集和調(diào)整之后，我們終于迎來(lái)了 4.0 的正式版！感謝在此期間每一位提供反饋、建議以及貢獻(xiàn)的人。我們會(huì)結(jié)合 rc 版本已經(jīng)涉及的更新以及一些比較重要的新增內(nèi)容于此進(jìn)行列舉。完整的更新文檔可以點(diǎn)擊此處[1]。v4 文檔地址：https://ant.design[2]

需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并進(jìn)入維護(hù)狀態(tài)。我們?nèi)匀粫?huì)為 v3 版本進(jìn)行半年的維護(hù)工作。維護(hù)截止日期為 2020 年 5 月。

設(shè)計(jì)規(guī)范升級(jí)

我們將基礎(chǔ)圓角由 4px 調(diào)整為 2px。中后臺(tái)產(chǎn)品以效率為第一優(yōu)先級(jí)，圓角樣式作為 UI 上的重要細(xì)節(jié)，更小的圓角從視覺(jué)上減少界面細(xì)節(jié)，提升了信息閱讀效率。此外，我們對(duì)陰影進(jìn)行了調(diào)整，使其更符合真實(shí)陰影，也同時(shí)將信息層級(jí)更好體現(xiàn)。

暗色主題

我們基于 v3 版本的色彩系統(tǒng)進(jìn)行了升級(jí)，v4 提供了暗色主題。你可以在頁(yè)面中點(diǎn)擊切換主題功能查看暗色主題效果：

無(wú)邊框組件

在業(yè)務(wù)中，我們發(fā)現(xiàn)有些場(chǎng)景會(huì)存在輕量級(jí)的選擇組件。因而我們提供了一種新的無(wú)邊框樣式，讓開(kāi)發(fā)者可以更簡(jiǎn)單的嵌入這些組件而不用額外覆蓋樣式。

兼容性調(diào)整

Ant Design 3.0 為了兼容舊版 IE 做出了非常多的努力。然而根據(jù)業(yè)界統(tǒng)計(jì)，IE9/10 瀏覽器無(wú)論是在全球還是在國(guó)內(nèi)份額都在隨著 Windows 系統(tǒng)更新而在不斷縮減。我們?cè)?4.0 版本，停止對(duì) IE 9/10 的支持工作（但仍然會(huì)支持 IE 11）。因而過(guò)去一些低性能的組件，也會(huì)隨著新的 css 特性而獲得性能提升。

與此同時(shí)，我們也將 v4 依賴的 React 最低版本要求升級(jí)到了 React 16.9。這意味著，v4 版本將會(huì)提供更多的 hooks 以簡(jiǎn)化你的代碼。

此外，我們也將在 v3 版本警告的一些廢棄 API 進(jìn)行了移除。我們強(qiáng)烈建議你將當(dāng)前項(xiàng)目升級(jí)到 v3 的最后一個(gè)版本，并根據(jù) warning 信息將廢棄 API 進(jìn)行更新。

更小的尺寸

在 [email protected] 中，我們引入了 svg 圖標(biāo)（為何使用 svg 圖標(biāo)？[3]）。使用了字符串命名的圖標(biāo) API 無(wú)法做到按需加載，因而全量引入了 svg 圖標(biāo)文件，這大大增加了打包產(chǎn)物的尺寸。在 4.0 中，我們調(diào)整了圖標(biāo)的使用 API 從而支持 tree shaking，減少 antd 默認(rèn)包體積約 150 KB(Gzipped)。

舊版 Icon 使用方式將被廢棄：

import { Icon, Button } from 'antd';

const Demo = () => (
  

    
    
  

);

4.0 中會(huì)采用按需引入的方式：

此外，我們也對(duì)相關(guān)依賴進(jìn)行了精簡(jiǎn)，從而降低打包尺寸（Gzipped）：

組件重做

Form 重做

Form 作為高頻使用的組件，其 API 略顯冗余。用戶需要通過(guò) Form.create 的 HOC 方式獲得表單實(shí)例，而通過(guò) form.getFieldDecorator 來(lái)對(duì)組件進(jìn)行數(shù)據(jù)綁定。此外，每次數(shù)據(jù)變更便會(huì)進(jìn)行整個(gè)表單的重新渲染，這使得在大數(shù)據(jù)表單中性能堪憂。在 v4 版本中，F(xiàn)orm 將自帶表單實(shí)例，你可以直接通過(guò) Form.Item 的 name 屬性進(jìn)行數(shù)據(jù)綁定，從而簡(jiǎn)化你的代碼：

我們發(fā)現(xiàn)大多數(shù)場(chǎng)景下，開(kāi)發(fā)者其實(shí)只關(guān)注表單提交成功的值。因而我們提供了 onFinish ，其只會(huì)在表單驗(yàn)證通過(guò)后觸發(fā)，而 validateFields 不在需要。

此外，F(xiàn)orm 提供了 hooks 方法 Form.useForm 允許你對(duì)表單示例進(jìn)行控制：

const [form] = Form.useForm();

React.useEffect(() => {
form.setFieldValues({ ... });
});

<Form form={form} />

同時(shí)，我們提供了 Form.List 組件，使你可以非常方便的實(shí)現(xiàn)列表字段的控制：

"names">
  {(fields, { add, remove }) => (
<div>
      {fields.map(field) => <Form.Item {...field}><Input />Form.Item>}
<Button onClick={() => add(initialValue)}>AddButton>
div>
  }
</Form.List>

Table 重做

由于我們提升了兼容性的最低要求，我們改成使用 sticky 樣式進(jìn)行固定列的實(shí)現(xiàn)，因而大大減少了表單擁有固定列時(shí)的性能消耗。而對(duì)于不支持 sticky 的 IE 11，我們采取降級(jí)處理。

同時(shí)，我們提供了新的 summary API 用于實(shí)現(xiàn)總結(jié)行的效果：對(duì)于 sorter 提供了多列排序的功能：此外，我們調(diào)整了底層邏輯，現(xiàn)在 fixedColumn、expandable、scroll 可以混合使用。提供了 body API 用于自定義表格內(nèi)容實(shí)現(xiàn)，你可以由此實(shí)現(xiàn)諸如虛擬滾動(dòng)的效果。

全新 DatePicker、 TimePicker 與 Calendar

我們對(duì)日期組件進(jìn)行了整體重寫，因而將其與 moment 進(jìn)行解耦。你可以通過(guò)我們提供的 generate 方法生成自定義日期庫(kù)的 Picker 組件。為了保持兼容，默認(rèn)的 Picker 組件仍然使用 moment 作為日期庫(kù)。自定義日期庫(kù)請(qǐng)參考此處[4]。

此外，我們提供了全套的時(shí)間、日期、周、月、年選擇器以及對(duì)應(yīng)的范圍選擇器。你可以通過(guò) picker 屬性進(jìn)行設(shè)置，不再需要通過(guò) mode 的受控方法來(lái)實(shí)現(xiàn)特地的選擇器：

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

在范圍選擇器上，我們也對(duì)交互進(jìn)行了優(yōu)化。你現(xiàn)在可以單獨(dú)的選擇開(kāi)始或結(jié)束時(shí)間，并且完美優(yōu)化了手動(dòng)輸入日期的體驗(yàn)。

Notification/Modal 提供 Hooks

在過(guò)去版本，你或許會(huì)遇到 Modal.xxx 和 Notification.xxx 調(diào)用方法無(wú)法獲得 Context 的問(wèn)題。這是由于我們對(duì)于這些語(yǔ)法糖會(huì)額外通過(guò) ReactDOM.render 創(chuàng)建一個(gè) React 實(shí)例，這也導(dǎo)致了 context 丟失的問(wèn)題。在新版中，我們提供了 hooks 方法，讓你可以將節(jié)點(diǎn)注入到需要獲得 context 的地方：

const [api, contextHolder] = notification.useNotification();

return (
<Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
<Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
Context2.Provider>
Context1.Provider>
);

虛擬滾動(dòng)

v4 中，我們將 Tree、TreeSelect、Select 進(jìn)行了改造，其默認(rèn)使用虛擬滾動(dòng)技術(shù)進(jìn)行性能優(yōu)化以承載大數(shù)據(jù)量的選項(xiàng)渲染。

Living demo[5]

此外，也對(duì)鍵盤交互以及無(wú)障礙進(jìn)行了優(yōu)化。

更多新功能/特性/優(yōu)化部分

• ConfigProvider 提供 direction 配置以支持 rtl 語(yǔ)言國(guó)際化。
• Form 與 ConfigProvider 支持 size 設(shè)置包含組件尺寸。
• Typography 增加 suffix 屬性。
• Progress 增加 steps 子組件。
• TextArea 支持 onResize。
• Grid 使用 flex 布局。
• ......

你可以點(diǎn)擊此處[6]查看完整更新日志。

如何升級(jí)

為了盡可能簡(jiǎn)化升級(jí)，我們保持了最大兼容。但是仍然有一部分 breaking change 需要注意。你可以首先嘗試使用我們提供的 codemod 工具進(jìn)行遷移，對(duì)部分無(wú)法遷移的內(nèi)容進(jìn)行手工遷移。升級(jí)請(qǐng)參考該文檔[7]。

以上

Ant Design 4.0 的誕生離不開(kāi)社區(qū)志愿者的貢獻(xiàn)與支持，感謝 @saeedrahimi[8] 實(shí)現(xiàn)了 rtl 的國(guó)際化功能，@shaodahong[9] 對(duì)于兼容包的貢獻(xiàn)，以及每個(gè)參與幫助開(kāi)發(fā)的人。是你們?yōu)殚_(kāi)源的貢獻(xiàn)讓 Ant Design 變得更加美好！

• Ant Design 4.0 設(shè)計(jì)體系進(jìn)階！設(shè)計(jì)資產(chǎn)不斷豐富，設(shè)計(jì)工具層出不窮，來(lái)新版官網(wǎng)[10]看看吧 ^_^
• 歡迎到 知乎問(wèn)答[11] 與我們互動(dòng)。

參考資料

點(diǎn)擊此處: https://link.zhihu.com/?target=https%3A//ant.design/changelog-cn

https://ant.design: https://link.zhihu.com/?target=https%3A//ant.design/

為何使用 svg 圖標(biāo)？: https://link.zhihu.com/?target=https%3A//github.com/ant-design/ant-design/issues/10353

此處: https://link.zhihu.com/?target=https%3A//ant.design/docs/react/replace-moment-cn

Living demo: https://link.zhihu.com/?target=https%3A//ant.design/components/select-cn/%23components-select-demo-big-data

此處: https://link.zhihu.com/?target=https%3A//ant.design/changelog-cn

該文檔: https://link.zhihu.com/?target=https%3A//ant.design/docs/react/migration-v4-cn

@saeedrahimi: https://link.zhihu.com/?target=https%3A//github.com/saeedrahimi

@shaodahong: https://link.zhihu.com/?target=https%3A//github.com/shaodahong

新版官網(wǎng): https://link.zhihu.com/?target=https%3A//ant.design/

知乎問(wèn)答: https://www.zhihu.com/question/33629737

推薦閱讀