• Ant Design GitHub 倉庫地址：https://github.com/ant-design/ant-design/

• Ant Design 官網(wǎng)：https://ant.design/index-cn

引言

在 9 月底，我們發(fā)布了 v5 alpha 版本。經(jīng)過 2 個(gè)月的調(diào)整，API 已經(jīng)逐漸穩(wěn)定。感謝社區(qū)同學(xué)所提供的寶貴建議與代碼貢獻(xiàn)，正是社區(qū)的力量使得 Ant Design 在短時(shí)間內(nèi)完成了大量的改造工作。這里我們會(huì)對 v5 的一些重大更新進(jìn)行說明，當(dāng)然你也可以直接到 更新日志 （https://ant.design/changelog/ ）頁面查看完整的更新內(nèi)容。

需要注意的是，同上一個(gè)大版本發(fā)布一樣。我們將會(huì)將 v4 從主分支切換至?4.x-stable?分支進(jìn)入維護(hù)狀態(tài)。v4 將會(huì)繼續(xù)維護(hù) 1 年時(shí)間，仍然會(huì)對 Bug 發(fā)布 Patch，但是此后不再接收新的 Feature Request。截止日期為 2023 年年底。原 v4 官網(wǎng)遷移至 https://4x.ant.design/。

設(shè)計(jì)升級

設(shè)計(jì)方面，我們根據(jù)自身業(yè)務(wù)實(shí)踐和社區(qū)呼聲，增加了 4 類新組件和 4+ 變體組件， 這些組件都經(jīng)過嚴(yán)謹(jǐn)?shù)耐魄茫_保了其通用性和擴(kuò)展性，希望它們?yōu)槟銕砹己玫氖褂皿w驗(yàn)。同時(shí)，我們將內(nèi)部使用很久的一些重型資產(chǎn)開放出來，幫助大家服務(wù)更多的業(yè)務(wù)場景。

另外在默認(rèn)樣式方面，我們對組件進(jìn)行全面升級。秉持快樂工作的內(nèi)核，我們從「更聚焦」、「去干擾」、「輕松感」三個(gè)方向?qū)ο到y(tǒng)視覺進(jìn)行了升級。其中涉及到主色、圓角、文字色階、交互反饋等多個(gè)全局樣式的優(yōu)化和調(diào)整，另外我們還對導(dǎo)航框架和幾乎所有組件做了去線化處理。這些改變，除了能帶給你煥然一新的感覺，在具體使用過程中，也更加易用。當(dāng)然，如果你對樣式主題有不一樣的審美和訴求，在 5.0 當(dāng)中，你可以輕易根據(jù)我們提供的樣式算法和配置工具，一鍵定制屬于你自己的主題。

最后，我們始終以人為本，正在試驗(yàn)名叫「快樂工作」的主題包，內(nèi)含情感增強(qiáng)特色組件，用戶在特定場景使用時(shí)，會(huì)有豐富但克制的動(dòng)畫，為用戶帶來一點(diǎn)“快樂感”。我們希望這是一個(gè)開始，呼吁行業(yè)設(shè)計(jì)多關(guān)注企業(yè)級產(chǎn)品，為冰冷的企業(yè)級產(chǎn)品注入更多的情感去關(guān)懷我們的用戶?？鞓饭ぷ髦黝}包將在發(fā)布會(huì)后推出，敬請期待～

全新 Design Token 模型

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

CSS-in-JS 動(dòng)態(tài)主題

過去我們嘗試通過 CSS Variables 提供動(dòng)態(tài)主題能力。在經(jīng)過一段時(shí)間的探索后，我們發(fā)現(xiàn)隨著設(shè)計(jì)系統(tǒng)的復(fù)雜度提升，其中間變量的維護(hù)成本就會(huì)變得不可忽略。因而在 v4 時(shí)期，CSS Variables 停留在了動(dòng)態(tài)主題色而沒有進(jìn)一步提供暗色、其他 Token 的動(dòng)態(tài)能力。到了 v5，隨著靈活性的需求呼之欲出，我們不得不再次面對動(dòng)態(tài)主題的問題。

在 v5 啟動(dòng)伊始，我們花了幾個(gè)月的時(shí)間對比當(dāng)下流行的動(dòng)態(tài)主題方案：CSS Variables 與 CSS-in-JS。CSS-in-JS 不需要維護(hù)中間變量，但是有更多的運(yùn)行時(shí)消耗（如果你對此不太熟悉，歡迎閱讀 Why We're Breaking Up with CSS-in-JS）https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b 。從維護(hù)成本而言，我們更傾向于后者，但是我們并不希望因此而損害用戶體驗(yàn)。因而在經(jīng)過一系列嘗試后，我們研發(fā)了一套針對組件級別的 CSS-in-JS 庫?@ant-design/cssinjs。它通過犧牲動(dòng)態(tài)性來獲取更高的緩存效率，從而減少運(yùn)行時(shí)的性能損耗。通過動(dòng)態(tài)主題能力，你通過 ConfigProvider 可以任意調(diào)整、嵌套主題：

甚至可以針對某一個(gè)組件進(jìn)行調(diào)整：

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

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

更多組件

新增 FloatButton 組件用于網(wǎng)站上的全局功能，原 BackTop 將收為其子組件：

新增 Tour 組件用于引導(dǎo)用戶了解產(chǎn)品功能：

此外，我們還提供了一些組件的變體用于內(nèi)聯(lián)使用：

兼容性調(diào)整

瀏覽器最低版本調(diào)整

今年 6 月 IE 宣布停止維護(hù)，因此 Ant Design v5 兼容性調(diào)整從 IE 11 提升至 Edge，其余現(xiàn)代瀏覽器不變。IE 兼容性樣式代碼將全部移除。至此，我們可以通過 CSS Logical Properties （https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties）將 RTL 與 LTR 樣式合并，進(jìn)一步減少維護(hù)成本。

默認(rèn) Day.js 代替 Moment.js

Moment.js 在 2020 年轉(zhuǎn)為 Legacy Project。（https://momentjs.com/docs/#/-project-status/）考慮到切換日期庫會(huì)導(dǎo)致 Break Change，我們在 v4 時(shí)期選擇繼續(xù)使用 Moment.js 直至 v4 結(jié)束。到了 v5，我們切換為更輕量級的 Day.js。（https://day.js.org/）Day.js 除了包體積更小之外，也帶來了 immutable 能力。當(dāng)然，如果你希望項(xiàng)目升級后仍然使用 Moment.js，可以通過?@ant-design/moment-webpack-plugin?插件進(jìn)行替換。

API 非 Break 調(diào)整

Ant Design 在 7 年的研發(fā)過程中，部分 API 出現(xiàn)分叉的情況。這導(dǎo)致開發(fā)者有額外的記憶成本，同時(shí)也使得我們新增 API 時(shí)也難以選擇。原本我們計(jì)劃對一系列 API 進(jìn)行整理合并，同 v3 升級 v4 一樣在當(dāng)前版本提示開發(fā)者遷移 API，并在 v5 移除廢棄 API。但是在經(jīng)過社區(qū)交流之后（https://github.com/ant-design/ant-design/issues/36609），我們決定改變計(jì)劃為：每個(gè)大版本只會(huì)調(diào)整少量 API，并且原廢棄 API 在新版本中會(huì)繼續(xù)兼容，推遲到下下個(gè)大版本移除。這次我們改動(dòng)以下部分，并且 v5 會(huì)全部兼容原來寫法：

• 彈層類組件?open?與?visible?統(tǒng)一至?open?以符合 HTML Spec（https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open）。

• dropdownClassName?與?popupClassName?統(tǒng)一至?popupClassName?以更符合語義。

• 結(jié)構(gòu)語法糖（例如?<Select.Option />）使用數(shù)據(jù)驅(qū)動(dòng)代替，以為性能優(yōu)化做準(zhǔn)備。

• 廢棄靜態(tài)方法（例如?Message.error），推薦應(yīng)用層封裝以支持 React 18 concurrent 模式。

組件移除

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

如何升級

如 兼容性調(diào)整 所述，由于 v5 不會(huì)對 API 做 Break Change，因而你可以嘗試通過我們的 codemod 工具進(jìn)行遷移。對于 Moment.js 可以使用我們提供的?@ant-design/moment-webpack-plugin?插件進(jìn)行替換。如果你的項(xiàng)目依賴了 antd 的 less 文件，請參考我們的遷移文檔通過 less-loader 進(jìn)行兼容。詳細(xì)文檔請點(diǎn)擊此處查閱 ???? https://next.ant.design/docs/react/migration-v5/。

未來規(guī)劃

未來我們計(jì)劃提供更多的組件，有些已經(jīng)排上議程，例如 WaterMark、QrCode、ColorPicker。而針對 Table 性能的熱烈呼聲我們已經(jīng)聽到，計(jì)劃為展示態(tài)提供虛擬滾動(dòng)能力，其將會(huì)原生支持固定列能力。此外，由于在 v4 中，我們已經(jīng)收斂結(jié)構(gòu)語法糖至數(shù)據(jù)驅(qū)動(dòng)屬性中，我們有了更好的機(jī)會(huì)對性能做優(yōu)化，包括不僅限于 Menu、Table、Steps、Collapse、Tabs、Dropdown 等等。

設(shè)計(jì)側(cè)，我們將會(huì)更新官方站點(diǎn)提供更多組件級別的設(shè)計(jì)指引，這將會(huì)由設(shè)計(jì)團(tuán)隊(duì)持續(xù)更新。過去我們在中文社區(qū)寫了不少文章，我們希望也趁此機(jī)會(huì)將文章提供英文版本，讓國際開發(fā)者、設(shè)計(jì)師可以共同閱讀。讓我們拭目以待。

寫在最后

Ant Design 經(jīng)歷 7 年時(shí)間，成為了生態(tài)豐富的社區(qū)。期間離不開社區(qū)同學(xué)的幫助，從 Ant Design v4 有大量社區(qū)志愿者參與到 v5 大部分功能都由社區(qū)同學(xué)完成。是你們讓 Ant Design v5 可以如此快速的完成研發(fā)工作，是你們讓開源變得美好。感謝大家！

• iamkun：https://github.com/iamkun

• zombiej：https://github.com/zombiej

• afc163：https://github.com/afc163

• madccc：https://github.com/madccc

• PeachScript：https://github.com/PeachScript

• vagusX：https://github.com/vagusX

• LongHaoo：https://github.com/LongHaoo

• xrkffgg：https://github.com/xrkffgg

• chenshuai2144：https://github.com/chenshuai2144

• lushevol：https://github.com/lushevol

• Wxh16144：https://github.com/Wxh16144

• kunl：https://github.com/kunl

• cncolder：https://github.com/cncolder

• c0dedance：https://github.com/c0dedance

• jrr997：https://github.com/jrr997

• Dunqing：https://github.com/Dunqing

• JarvisArt：https://github.com/JarvisArt

• zqran：https://github.com/zqran

• TrickyPi：https://github.com/TrickyPi

• li-jia-nan：https://github.com/li-jia-nan

• heiyu4585：https://github.com/heiyu4585

• foryuki：https://github.com/foryuki

• chunsch：https://github.com/chunsch

• yykoypj：https://github.com/yykoypj

• cl1107：https://github.com/cl1107

• poyiding：https://github.com/poyiding

• dancerphil：https://github.com/dancerphil

• miracles1919：https://github.com/miracles1919

• zpc7：https://github.com/zpc7

• shuaijiumei：https://github.com/shuaijiumei

• lzm0x219：https://github.com/lzm0x219

• LuZhenJie1999：https://github.com/LuZhenJie1999

• BesideWithYou：https://github.com/BesideWithYou

• shezhangzhang：https://github.com/shezhangzhang