Ant Design 4.0 正式版來了！

  • 2020 年 3 月 13 日
  • 筆記

Ant Design 4.0 正式版來了

引言

我們在 SEE Conf 之際發布了 4.0 rc 版本。經過 1 個多月的回饋收集和調整之後，我們終於迎來了 4.0 的正式版！感謝在此期間每一位提供回饋、建議以及貢獻的人。我們會結合 rc 版本已經涉及的更新以及一些比較重要的新增內容於此進行列舉。完整的更新文檔可以點擊此處[1]。v4 文檔地址：https://ant.design[2]

需要注意的是，v3 版本於 2019 年 12 月合入 3.x-stable 分支並進入維護狀態。我們仍然會為 v3 版本進行半年的維護工作。維護截止日期為 2020 年 5 月。

設計規範升級

我們將基礎圓角由 4px 調整為 2px。中後台產品以效率為第一優先順序，圓角樣式作為 UI 上的重要細節，更小的圓角從視覺上減少介面細節，提升了資訊閱讀效率。此外，我們對陰影進行了調整，使其更符合真實陰影，也同時將資訊層級更好體現。

暗色主題

我們基於 v3 版本的色彩系統進行了升級，v4 提供了暗色主題。你可以在頁面中點擊切換主題功能查看暗色主題效果：

無邊框組件

在業務中，我們發現有些場景會存在輕量級的選擇組件。因而我們提供了一種新的無邊框樣式，讓開發者可以更簡單的嵌入這些組件而不用額外覆蓋樣式。

borderless.png

兼容性調整

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 圖標（為何使用 svg 圖標？[3]）。使用了字元串命名的圖標 API 無法做到按需載入，因而全量引入了 svg 圖標文件，這大大增加了打包產物的尺寸。在 4.0 中，我們調整了圖標的使用 API 從而支援 tree shaking，減少 antd 默認包體積約 150 KB(Gzipped)。

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

import { Icon, Button } from 'antd';    const Demo = () => (    <div>      <Icon type="smile" />      <Button icon="smile" />    </div>  );

4.0 中會採用按需引入的方式：

import { Button } from 'antd';    // tree-shaking supported  - import { Icon } from 'antd';  + import { SmileOutlined } from '@ant-design/icons';      const Demo = () => (      <div>  -     <Icon type="smile" />  +     <SmileOutlined />        <Button icon={<SmileOutlined />} />      </div>    );      // or directly import    import SmileOutlined from '@ant-design/icons/SmileOutlined';

此外，我們也對相關依賴進行了精簡，從而降低打包尺寸（Gzipped）：

組件重做

Form 重做

Form 作為高頻使用的組件，其 API 略顯冗餘。用戶需要通過 Form.create 的 HOC 方式獲得表單實例，而通過 form.getFieldDecorator 來對組件進行數據綁定。此外，每次數據變更便會進行整個表單的重新渲染，這使得在大數據表單中性能堪憂。在 v4 版本中，Form 將自帶表單實例，你可以直接通過 Form.Item 的 name 屬性進行數據綁定，從而簡化你的程式碼：

- const { form } = this.props;    - const onSubmit = () => {  -   form.validateFields((err, values) => {  -     if (!err) {  -      console.log('Received values of form: ', values);  -    }  -   });  - };    + const onFinish = (values) => {  +   console.log('Received values of form: ', values);  + };    - <Form onSubmit={onSubmit}>  + <Form onFinish={onFinish}>  -   <Form.Item>  +   <Form.Item name="username">  -     {getFieldDecorator('username')(  -       <Input />,  -     )}  +     <Input />      </Form.Item>    </Form>

我們發現大多數場景下，開發者其實只關注表單提交成功的值。因而我們提供了 onFinish ，其只會在表單驗證通過後觸發，而 validateFields 不在需要。

此外，Form 提供了 hooks 方法 Form.useForm 允許你對錶單示例進行控制：

const [form] = Form.useForm();    React.useEffect(() => {  form.setFieldValues({ ... });  });    <Form form={form} />

同時，我們提供了 Form.List 組件，使你可以非常方便的實現列表欄位的控制：

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

Table 重做

由於我們提升了兼容性的最低要求，我們改成使用 sticky 樣式進行固定列的實現，因而大大減少了表單擁有固定列時的性能消耗。而對於不支援 sticky 的 IE 11，我們採取降級處理。

同時，我們提供了新的 summary API 用於實現總結行的效果：

對於 sorter 提供了多列排序的功能：

此外，我們調整了底層邏輯，現在 fixedColumn、expandable、scroll 可以混合使用。提供了 body API 用於自定義表格內容實現，你可以由此實現諸如虛擬滾動的效果。

全新 DatePicker、 TimePicker 與 Calendar

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

此外，我們提供了全套的時間、日期、周、月、年選擇器以及對應的範圍選擇器。你可以通過 picker 屬性進行設置，不再需要通過 mode 的受控方法來實現特地的選擇器：

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

在範圍選擇器上，我們也對交互進行了優化。你現在可以單獨的選擇開始或結束時間，並且完美優化了手動輸入日期的體驗。

Notification/Modal 提供 Hooks

在過去版本，你或許會遇到 Modal.xxx 和 Notification.xxx 調用方法無法獲得 Context 的問題。這是由於我們對於這些語法糖會額外通過 ReactDOM.render 創建一個 React 實例，這也導致了 context 丟失的問題。在新版中，我們提供了 hooks 方法，讓你可以將節點注入到需要獲得 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>  );

虛擬滾動

v4 中，我們將 Tree、TreeSelect、Select 進行了改造，其默認使用虛擬滾動技術進行性能優化以承載大數據量的選項渲染。

Living demo[5]

此外，也對鍵盤交互以及無障礙進行了優化。

更多新功能/特性/優化部分

  • ConfigProvider 提供 direction 配置以支援 rtl 語言國際化。
  • Form 與 ConfigProvider 支援 size 設置包含組件尺寸。
  • Typography 增加 suffix 屬性。
  • Progress 增加 steps 子組件。
  • TextArea 支援 onResize。
  • Grid 使用 flex 布局。
  • ……

你可以點擊此處[6]查看完整更新日誌。

如何升級

為了儘可能簡化升級，我們保持了最大兼容。但是仍然有一部分 breaking change 需要注意。你可以首先嘗試使用我們提供的 codemod 工具進行遷移，對部分無法遷移的內容進行手工遷移。升級請參考該文檔[7]。

以上

Ant Design 4.0 的誕生離不開社區志願者的貢獻與支援，感謝 @saeedrahimi[8] 實現了 rtl 的國際化功能，@shaodahong[9] 對於兼容包的貢獻，以及每個參與幫助開發的人。是你們為開源的貢獻讓 Ant Design 變得更加美好！

參考資料

[1]

點擊此處: https://ant.design/changelog-cn

[2]

https://ant.design: https://ant.design

[3]

為何使用 svg 圖標？: https://github.com/ant-design/ant-design/issues/10353

[4]

此處: https://ant.design/docs/react/replace-moment-cn

[5]

Living demo: https://ant.design/components/select-cn/#components-select-demo-big-data

[6]

此處: https://ant.design/changelog-cn

[7]

該文檔: https://ant.design/docs/react/migration-v4-cn

[8]

@saeedrahimi: https://github.com/saeedrahimi

[9]

@shaodahong: https://github.com/shaodahong

VirMach 便宜 VPS

QNews

QNews