03.01 React 國內最強 UI 庫 Ant Design 4.0 正式版來了！性能大幅提升設計頭條網

03.01 React 國內最強 UI 庫 Ant Design 4.0 正式版來了！性能大幅提升

2020-03-01 16:18:37 開發指南

引言

我們在 SEE Conf 之際發佈了 4.0 rc 版本。經過 1 個多月的反饋收集和調整之後，我們終於迎來了 4.0 的正式版！感謝在此期間每一位提供反饋、建議以及貢獻的人。我們會結合 rc 版本已經涉及的更新以及一些比較重要的新增內容於此進行列舉。完整的更新文檔可以點擊此處。v4 文檔地址：https://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 圖標（為何使用 svg 圖標？）。使用了字符串命名的圖標 API 無法做到按需加載，因而全量引入了 svg 圖標文件，這大大增加了打包產物的尺寸。在 4.0 中，我們調整了圖標的使用 API 從而支持 tree shaking，減少 antd 默認包體積約 150 KB(Gzipped)。

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

<code>import { Icon, Button } from 'antd';

const Demo = () => (
  
    <icon>
    <button>
  

);/<code>

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

<code>import { Button } from 'antd';

// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    
-     <icon> 

+     <smileoutlined>
      <button>} />
    

  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';
/<code>

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

組件重做

Form 重做

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

<code>- 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.item>
+   <form.item>
-     {getFieldDecorator('username')(
-       ,
-     )}
+     
    /<form.item>
  /<form.item>/<code>

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

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

<code>const [form] = Form.useForm(); 


React.useEffect(() => {
\tform.setFieldValues({ ... });
});

<form>/<code>

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

<code><form.list>
  {(fields, { add, remove }) => (
    
      {fields.map(field) => <form.item>/<form.item>}
      <button> add(initialValue)}>Add/<button>
    

  }
/<form.list>/<code>

Table 重做

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

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

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

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

全新 DatePicker、 TimePicker 與 Calendar

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

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

<code><rangepicker>
<rangepicker>
<rangepicker>
<rangepicker>
<rangepicker>/<code>

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

Notification/Modal 提供 Hooks

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

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

return (
  <context1.provider>
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <context2.provider>
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    /<context2.provider>
  /<context1.provider>
);/<code>