Ant Design 5.0 正式發布

出品|開源中國

Ant Design 5.0 已在上周正式發布。

Ant Design 開發團隊表示，同上一個大版本發布一樣，他們將會把 v4 從主分支切換至 4.x-stable 分支進入維護狀態。v4 將會繼續維護 1 年時間，仍然會對 Bug 發布 Patch，但是此後不再接收新的 Feature Request。截止日期為 2023 年年底。原 v4 官網遷移至 https://4x.ant.design/。

下面的重要更新內容摘錄自 發布文檔。

設計升級

設計方面，我們根據自身業務實踐和社區呼聲，增加了 4 類新組件和 4 變體組件， 這些組件都經過嚴謹的推敲，確保了其通用性和擴展性，希望它們為你帶來良好的使用體驗。同時，我們將內部使用很久的一些重型資產開放出來，幫助大家服務更多的業務場景。

另外在默認樣式方面，我們對組件進行全面升級。秉持快樂工作的內核，我們從「更聚焦」、「去干擾」、「輕鬆感」三個方向對系統視覺進行了升級。其中涉及到主色、圓角、文字色階、交互反饋等多個全局樣式的優化和調整，另外我們還對導航框架和幾乎所有組件做了去線化處理。這些改變，除了能帶給你煥然一新的感覺，在具體使用過程中，也更加易用。當然，如果你對樣式主題有不一樣的審美和訴求，在 5.0 當中，你可以輕易根據我們提供的樣式演算法和配置工具，一鍵定製屬於你自己的主題。

最後，我們始終以人為本，正在試驗名叫「快樂工作」的主題包，內含情感增強特色組件，用戶在特定場景使用時，會有豐富但克制的動畫，為用戶帶來一點 「快樂感」。我們希望這是一個開始，呼籲行業設計多關注企業級產品，為冰冷的企業級產品注入更多的情感去關懷我們的用戶。快樂工作主題包將在發布會後推出，敬請期待～

全新 Design Token 模型

在 v4 版本中，我們提出更多的 less 變數以支持主題定製能力。然而除了色板支持完全的派生能力外，其他如字體、行高、間距都沒有對應的演算法。在 v5 中，我們改造了所有的 Token，使其基於 Seed Algorithm 可以派生出所有的 Design Token。全新的 Design Token 模型支持多演算法 Pipeline，從而大大降低開發者拓展成本。你可以選擇一個現成的演算法，再加自己的拓展部分演算法（當然你也可以寫一套完整的演算法），就可以生成一套完整的 Design Token：

CSS-in-JS 動態主題

過去我們嘗試通過 CSS Variables 提供動態主題能力。在經過一段時間的探索後，我們發現隨著設計系統的複雜度提升，其中間變數的維護成本就會變得不可忽略。因而在 v4 時期，CSS Variables 停留在了動態主題色而沒有進一步提供暗色、其他 Token 的動態能力。到了 v5，隨著靈活性的需求呼之欲出，我們不得不再次面對動態主題的問題。

在 v5 啟動伊始，我們花了幾個月的時間對比當下流行的動態主題方案：CSS Variables 與 CSS-in-JS。CSS-in-JS 不需要維護中間變數，但是有更多的運行時消耗（如果你對此不太熟悉，歡迎閱讀 Why We"re Breaking Up with CSS-in-JS）。從維護成本而言，我們更傾向於後者，但是我們並不希望因此而損害用戶體驗。因而在經過一系列嘗試後，我們研發了一套針對組件級別的 CSS-in-JS 庫 @ant-design/cssinjs。它通過犧牲動態性來獲取更高的緩存效率，從而減少運行時的性能損耗。

通過動態主題能力，你通過 ConfigProvider 可以任意調整、嵌套主題：

<ConfigProvider theme={{ token: { colorPrimary: "red" }}}>
  <ConfigProvider theme={{ token: { colorPrimary: "blue" }}}>
    <MyApp />
  </ConfigProvider></ConfigProvider>

甚至可以針對某一個組件進行調整：

<ConfigProvider theme={{
  components: {    Button: { colorText: "red" },
  },
}}>
  <MyApp /></ConfigProvider>

代碼示例太乏味？你可以直接在我們的首頁體驗示例：

新的 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 你不在需要使用 babel-plugin-import 摘除未使用到的樣式。新的方案將自動按需載入樣式。

更多組件

新增 FloatButton 組件用於網站上的全局功能，原 BackTop 將收為其子組件：

新增 Tour 組件用於引導用戶了解產品功能：

此外，我們還提供了一些組件的變體用於內聯使用：

兼容性調整

瀏覽器最低版本調整

今年 6 月 IE 宣布停止維護，因此 Ant Design v5 兼容性調整從 IE 11 提升至 Edge，其餘現代瀏覽器不變。IE 兼容性樣式代碼將全部移除。至此，我們可以通過 CSS Logical Properties 將 RTL 與 LTR 樣式合併，進一步減少維護成本。

默認 Day.js 代替 Moment.js

Moment.js 在 2020 年轉為 Legacy Project。考慮到切換日期庫會導致 Break Change，我們在 v4 時期選擇繼續使用 Moment.js 直至 v4 結束。到了 v5，我們切換為更輕量級的 Day.js。Day.js 除了包體積更小之外，也帶來了 immutable 能力。

當然，如果你希望項目升級後仍然使用 Moment.js，可以通過 @ant-design/moment-webpack-plugin 插件進行替換。

API 非 Break 調整

Ant Design 在 7 年的研發過程中，部分 API 出現分叉的情況。這導致開發者有額外的記憶成本，同時也使得我們新增 API 時也難以選擇。原本我們計劃對一系列 API 進行整理合併，同 v3 升級 v4 一樣在當前版本提示開發者遷移 API，並在 v5 移除廢棄 API。但是在經過社區交流之後，我們決定改變計劃為：每個大版本只會調整少量 API，並且原廢棄 API 在新版本中會繼續兼容，推遲到下下個大版本移除。這次我們改動以下部分，並且 v5 會全部兼容原來寫法：

• 彈層類組件 open 與 visible 統一至 open 以符合 HTML Spec。

• dropdownClassName 與 popupClassName 統一至 popupClassName 以更符合語義。

• 結構語法糖（例如 <Select.Option />）使用數據驅動代替，以為性能優化做準備。

• 廢棄靜態方法（例如 Message.error），推薦應用層封裝以支持 React 18 concurrent 模式。

組件移除

v5 將會移除 Comment 組件 與 PageHeader 組件，BackTop 將會成為 FloatButton 子組件。由於 Comment 組件本身除樣式外並未提供實際能力，開發者仍然需要額外工作來實現評論功能。此外由於實際使用場景不多，我們決定從 v5 中移除，但是你仍然可以在兼容包中找到它。PageHeader 組件同樣需要一定的開發工作來使其工作，因而我們將其挪至 ProComponents 中，與 ProLayout 一同使用從而提供真正的交互能力。

如何升級

如 兼容性調整 所述，由於 v5 不會對 API 做 Break Change，因而你可以嘗試通過我們的 codemod 工具進行遷移。對於 Moment.js 可以使用我們提供的 @ant-design/moment-webpack-plugin 插件進行替換。如果你的項目依賴了 antd 的 less 文件，請參考我們的遷移文檔通過 less-loader 進行兼容。詳細文檔請點擊此處查閱。

未來規劃

未來我們計劃提供更多的組件，有些已經排上議程，例如 WaterMark、QrCode、ColorPicker。而針對 Table 性能的熱烈呼聲我們已經聽到，計劃為展示態提供虛擬滾動能力，其將會原生支持固定列能力。此外，由於在 v4 中，我們已經收斂結構語法糖至數據驅動屬性中，我們有了更好的機會對性能做優化，包括不僅限於 Menu、Table、Steps、Collapse、Tabs、Dropdown 等等。

設計側，我們將會更新官方站點提供更多組件級別的設計指引，這將會由設計團隊持續更新。過去我們在中文社區寫了不少文章，我們希望也趁此機會將文章提供英文版本，讓國際開發者、設計師可以共同閱讀。讓我們拭目以待。

完整 Changelog：https://ant.design/changelog-cn

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！