Ant Design 4.0 正式版初探

BUG製造機器發表於2020-02-29

趕上二月的尾巴，Ant Design 4.0 正式版 釋出了，平時這款 UI 框架用的比較多，先來看看相比 3.x 版本有什麼大的變化。
本文只會對更新內容中作者平時用的比較多的特性進行整理，詳情見官文地址、更新日誌

目錄

更新指南

  • 手動逐條檢查程式碼進行修改。
  • codemod cli 工具 @ant-design/codemod-v4 幫助快速升級到 v4 版本
    • 在執行 codemod cli 前，請先提交你的原生程式碼修改。
    # 通過 npx 直接執行
npx -p @ant-design/codemod-v4 antd4-codemod src

# 或者全域性安裝
# 使用 npm
npm i -g @ant-design/codemod-v4
# 或者使用 yarn
yarn global add @ant-design/codemod-v4

# 執行
antd4-codemod src
複製程式碼
    • 對於無法自動修改的部分，codemod 會在命令列進行提示，建議按提示手動修改。修改後可以反覆執行上述命令進行檢查。

相容性調整

  • 由於 IE 在全球的市場份額在逐年降低，它的相容性問題更是在業界臭名昭著，這次更新僅 支援到 IE11（莫名開心）
  • React 最低支援版本為 React 16.9，部分元件開始使用 hooks（不瞭解的可以去學習學習了，比寫class元件舒服太多了） 進行重構

設計規範調整

  • 行高 從 1.5(21px) 調整為 1.5715(22px)
  • 圓角 調整，由4px 改為 2px
  • 全域性 陰影 優化，調整為三層陰影區分控制元件層次關係
  • 一些 顏色 的調整

重要變化！！！

圖示的使用升級

  • 現在圖示可以按需引入，圖示元件均從@ant-design/icons中引入：
 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';
複製程式碼
  • 減少 antd 預設包體積約 150 KB(Gzipped)

Form 重做

後臺管理系統必備元件，一直以來Form組件的功能很強大，但是上手卻並不簡單，API 也略顯冗餘（一直都通過form.getFieldDecorator來繫結控制元件的方式很麻煩），而且每次資料變更便會進行整個表單的重新渲染，這使得在大資料表單中效能堪憂。

簡化了很多，降低了學習難度，程式碼量也變少了，效能也提高了，五星好評。

  • getFieldDecorator 不再需要。直接在 Form.Item 上通過name屬性繫結表單控制元件值，其他選項也直接寫進 Form.Item
  • Form.create()不再需要。不再需要通過這種方式往元件中注入 Form 例項
    • 現在通過 Form.useForm() 建立 Form 實體 const [form] = Form.useForm()
    • 對於 class component，也可以通過 ref 獲得實體formRef = React.createRef(); <Form ref={formRef}>
  • 新版 Form 採用增量更新方式，僅會更新需要更新的欄位。
    • 如果一個 Form.Item 設定了 dependencies 依賴屬性。那麼它所依賴的 Form.Item 更新時，該 Form.Item 將自動觸發更新與校驗（如密碼更改後需要觸發確認密碼的檢驗）；
    • 如果一個欄位設定 shouldUpdate 屬性 為 true，那麼 Form 的任意變化都會使該 Form.Item 重新渲染，這個屬性還可以傳入一個方法，表單的每次數值更新都會呼叫該方法，提供原先的值與當前的值以供你比較是否需要更新。
  • onFinish 替代 onSubmit。過去版本需要通過監聽 onSubmit 事件手工觸發 validateFields。新版直接使用 onFinish 事件，該事件 僅當校驗通過後才會執行
  • scrollToField 替代 validateFieldsAndScroll。
    onFinishFailed = ({ errorFields }) => {
  form.scrollToField(errorFields[0].name);
};
複製程式碼
  • initialValue 從欄位中移到 Form 中。傳入物件，統一管理。
  • validateFields不再支援 callback，現返回 Promise 物件。不再需要判斷 errors 是否為空。
  • 提供了 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，採取降級處理。

  • 在沒有 columns 時仍然會保留一列
    Ant Design 4.0 正式版初探
  • 新的 summary API 用於實現總結行的效果。可以更加靈活的實現表格資料的整體處理。官方例子
  • sorter現在可以通過multiple設定多列排序的優先級，通過compare設定排序邏輯
    //columns中
sorter: {
    compare: (a, b) => a.math - b.math,
    multiple: 2,
},
複製程式碼
  • 調整了底層邏輯，現在 fixedColumn、expandable、scroll 可以混合使用。提供了 body API 用於自定義表格內容實現，可以由此實現諸如虛擬滾動的效果。虛擬滾動官方例子

DatePicker 重寫

  • 與 moment 進行解耦（仍預設使用），可以使用自定義日期庫替換：官方說明
  • 皮膚和輸入框分離
    Ant Design 4.0 正式版初探
    Ant Design 4.0 正式版初探
  • 提供了全套的時間、日期、周、月、年選擇器以及對應的範圍選擇器。可以通過 picker 屬性進行設定，不再需要通過 mode 的受控方法來實現特地的選擇器
  • 可以單獨的選擇開始或結束時間。之前的版本是範圍選擇必須開始時間和結束時間一起選，體驗很不好。
  • 範圍選擇中間的 ～ 變成了 ->

Progress 增加 steps 子元件

  • 可以給進度條帶上步驟，挺有意思的特性，感覺以後會常用。

Ant Design 4.0 正式版初探

其他細節

  • 文件右下角新增 切換暗色主題 的懸浮按鈕（相當護眼）
  • 為一些選擇器元件增加了 無邊框 樣式，如 DatePicker、Select
  • 各種元件 屬性名的移除 以及替換方案
    • 移除了 LocaleProvider，請使用 ConfigProvider 替代。
    • 移除了 Mention，請使用 Mentions 替代。
  • 巢狀欄位路徑使用陣列 諸如 user.name 來代表 { user: { name: '' } }，現在改為['user', 'name']
  • 將 Tree、TreeSelect、Select 進行了改造，預設使用 虛擬滾動技術 進行效能優化以承載大資料量的選項渲染
  • Notification/Modal 提供 Hooks 解決 context 丟失的問題 Modal.useModal()、notification.useNotification()
  • 相容包 @ant-design/compatible 包含一些已經廢棄的 老版本元件

相關文章