不破不立 —— 揮別 less-loader，Ant Design 5.0 Alpha 發(fā)布
?????♀??編者按：本文作者是 Ant Design Team，介紹了 Ant Design 5.0 Alpha 的新特性和重要更新，歡迎查閱～
關注我們的同學可以知道在今年（2022）年初的時候我們發(fā)布了一篇《Plan about Ant Design V5》[1]，來介紹我們將要啟動的 5.0 計劃。社區(qū)在經歷 8 個月的研發(fā)、發(fā)布 30 個 experimental 版本驗證后，新的技術架構已經穩(wěn)定，終于發(fā)布了 v5 alpha 版本！歡迎大家嘗試，并提供寶貴的意見。
在正式版發(fā)布之前，我們還有更多事情要做。但是如果你已經迫不及待嘗鮮，可以訪問我們的 5.0 官網?[2]（遷移參考此處?[3]?）。
新特性
新的設計
5.0 帶來了全新的設計理念，圍繞用戶目標，根據(jù)「更聚焦」、「去干擾」、「輕松感」三大原則，對 Ant Design 設計系統(tǒng)在視覺上進行重塑，助力用戶在虛擬辦公空間更加「快樂工作」。
針對這些原則，我們在以下方面作出了優(yōu)化，包括但不限于：
增加梯度圓角并增加了基礎圓角的大小，整體風格更輕松；
減少線條使用，以獲得更高的空間使用率和更簡潔的使用體驗；
提高了交互動畫速度，交互體驗更加流暢；
補充了統(tǒng)一的聚焦樣式，僅在使用鍵盤聚焦時出現(xiàn)，無障礙能力（Accessibility）進一步提升。
新的動態(tài)主題方案
在 4.x 版本中，受制于 less 的樣式與主題方案，我們一直擺脫不了兩個問題的困擾：如何動態(tài)更換主題以及如何混合使用主題。經過一段時間的探索，在 5.0 版本中，我們放棄了跟隨 antd 已久的 less 方案，轉而擁抱 CSS-in-JS。CSS-in-JS 通過運行時的樣式計算能力完美地解決了上述兩個問題，并且為我們帶來了更多的提升：
更小的 BundleSize；
不依賴任何插件的樣式按需引入能力。
有了 CSS-in-JS 的技術加持，我們推出了全新的定制主題方案。在 5.0 版本中，Design Token 將是主題的基本組成部分，所有組件都會消費他們構筑樣式。同時，我們依賴 Design Token 建立了樣式的緩存，即認為在同樣的 antd 版本下同樣的 Design Token 所對應的組件樣式是等同的，因此避免了重復生成樣式進行對比的操作，避免了性能損耗。
基于 Design Token 和 CSS-in-JS ，我們制定了更加靈活的定制主題方案。通過 5.0 的定制主題，你可以做到的包括但不限于：
全局主題定制；
局部主題（嵌套主題/多主題并行）；
組件主題定制；
在 Sketch 中直接使用配置過主題的設計稿。
想要了解更多請查看定制主題?[4]?文檔。
新增組件
5.0 版本中計劃將會有一些新的組件供用戶選擇！他們分別是：
Tour 漫游式引導
QrCode 二維碼
WaterMark 水印
FloatButton 懸浮按鈕
目前已有 FloatButton 懸浮按鈕?[5]?準備就緒，歡迎試用。
其他重要更新
更多變化請查看遷移文檔?[6]
瀏覽器兼容性調整
在今年 6 月，IE 瀏覽器正式停止了服務，也因此 Ant Design 5.0 版本將不再支持 IE 瀏覽器。放棄兼容一些低版本的瀏覽器之后我們可以使用更多 w3c 通過的新特性來豐富我們的組件庫。
彈窗組件 API 統(tǒng)一
在 4.x 及更早的版本中，具有彈窗的組件受控顯示的 API 一直分裂為兩派，以 Select 為首的?open，以及以 Tooltip 為首的?visible。為了減少今后編碼及使用中的不一致性，并降低記憶成本，我們在 5.0 版本中決定在相關組件中將?visible這個屬性廢棄。我們經過多方面的考慮選擇了open?這個屬性，比如原生 HTML 中 dialog 標簽就具有?open?這個屬性而不是?visible。您仍可以在 5.0 使用?visible，但是我們將在控制臺中發(fā)出廢棄警告，并在下一個 major (6.0) 版本中移除這個屬性。
同樣地，彈窗的?className?也一直分裂為?popupClassName?和?dropdownClassName?兩個屬性，我們也將在 5.0 中統(tǒng)一為?popupClassName。
廢棄結構語法糖
在 4.x 版本及更早的版本，我們提供了諸如?Menu.Item?等的 JSX 語法糖來編寫代碼，但這帶來了額外的維護成本和糟糕的性能。因此，在 5.0 版本后，我們更加推薦數(shù)據(jù)驅動的組件使用方法，即通過?items?屬性傳入對象來替代結構語法糖，這將會有更好的性能和更方便的數(shù)據(jù)組織方式，并提前為將來的優(yōu)化做好準備。
廢棄靜態(tài)方法
在 Message 等組件中，我們提供了諸如?message.error?等靜態(tài)方法來使用該組件。但在 React 18 版本之后，不處于 React 生命周期內的靜態(tài)方法會出現(xiàn)各種各樣不適配的問題。在 5.0 版本中，我們更加推薦使用這些組件的 hooks 版本，這更符合 React 的生命周期。同時也推薦在應用層面封裝自己的 hooks 來獲得更好地使用體驗。
接下來的計劃
在發(fā)布正式版之前，我們仍有大量的工作正在進行中，其中包括：
提供從 V4 遷移至 V5 的 codemod 工具；
提供更加完備的主題編輯器；
翻新我們的官網，提供更多實用功能，比如組件支持復制粘貼到 Sketch；
更多的新組件。
請繼續(xù)期待 Ant Design 5.0 帶來的全新體驗！
寫在最后
Ant Design 5.0 歷經 8 個月的開發(fā)時間，期間不少社區(qū)同學參與并貢獻了代碼，在此我們表示衷心的感謝，也感謝大家對于 Ant Design 的熱情與認可。最后再次歡迎大家嘗鮮我們的 5.0 alpha 版本，如果您遇到問題，也歡迎在我們的 issue 板塊中提出。同時也歡迎更多的社區(qū)同學共建 Ant Design，Ant Design loves you ?? ！
?? 相關鏈接
[1] https://github.com/ant-design/ant-design/issues/33862
[2] https://next.ant.design/index-cn
[3] https://next.ant.design/docs/react/migration-v5-cn
[4] https://next.ant.design/docs/react/customize-theme-v5-cn
[5] https://next.ant.design/components/float-button-cn/
[6] https://next.ant.design/docs/react/migration-v5-cn
