兩年磨一劍，Ant Design核心作者解答開發者關心問題

Ant Design 是螞蟻金服推出的一套企業級 UI 設計語言和 React 元件庫，從 2015 年推出開始便受到廣泛的關注與使用，目前在 GitHub 上已收獲超過 5.7 萬個 star。近日，Ant Design 釋出了 4.0 版本，帶來了一些重大更新。前端之巅采訪了 Ant Design 團隊的核心作者之一的蔣吉麟，聊了聊 4.0 版本更新背後的一些故事。

Ant Design 4.0 釋出了，這次帶來了哪些重磅的更新？

​本次釋出了一些重大更新。比如我們添加了暗黑主題，無邊框元件，RTL 國際化支援，Table 、Form、Select 等等的元件重做進而大幅提升性能。由于内容非常多 ，避免直接變成釋出文檔。歡迎移步至語雀檢視完整更新：《Ant Design 正式版來了！》

經過多年發展，Ant Design 已經成為一個生态，請介紹下這個生态包括哪些重要成員，生态今後的演進方向是什麼？

Ant Design（以下簡稱 antd） 作為一個設計體系，包含的不僅僅是一個元件庫。除了耳熟能詳的 Ant Design React 外，還有 Angular 版本的 NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React，以及來自社群志願者的 Ant Design Vue。垂直方向開箱即用的中台前端 / 設計解決方案 Ant Design Pro 和對應的區塊市場，以及衍生元件庫 Pro Layout 和 Pro Table。設計上也提供了非常多的規範文檔以及相關的設計資産。

Ant Design 像是一顆樹，在其之上開枝散葉非常的有想象空間。未來首先還是會繼續基于設計體系進行深耕，其次會跟随相關架構一同進步。同時 Ant Design 還會立足于真實的業務需求，來豐富生态産品。

在從 3.0 到 4.0 的過程中，antd 團隊攻克的最大難題是什麼？最自豪的新特性是什麼？

v4 版本和社群同學一起重構了大量的底層元件，進而大幅提升了元件渲染性能。舉個例子，v3 版本中 Form 元件的字段更新會使得整個 Form 重新渲染，這在大型表單中會有嚴重的性能問題。在 v4 中，Form 隻會更新相關的字段元件，進而大大降低了渲染時長。在 Tree、Select、TreeSelect 等元件内置虛拟滾動，進而大幅減少了實際渲染的元素。

說到比較難的，就是這次重構由于支援虛拟滾動，是以需要處理基于虛拟滾動的動畫收縮伸展方案。舉個例子，Tree 元件在 v3 版本中，縮放可以通過原生的 transition 與 height 來實作收縮伸展效果。但是在虛拟滾動中，每個元素其實是獨立的元素，是以縮放時如果要達到和 v3 一緻的動畫效果，就需要将與之相關的算法自行實作。因而我們将其劃分為多個階段，在不同的階段處理不同的邏輯，進而組合出支援虛拟滾動的動畫實作。具體實作邏輯比較複雜，如果感興趣可以檢視 rc-virtual-list 的相關代碼。

antd 在設計上是如何權衡效率、性能 / 體驗和品質三者的？

個人角度看，後三者者其實并不沖突。Ant Design 的元件開發一般有以下幾個步驟：

1. 設計師設計視覺、互動稿；
2. 工程師進行開發；
3. Code Review & 設計師評審。

中間每個環節都會認真負責地完成，其中 Code Review 部分也是最漫長的階段。Code Review 環節會對 API 以及代碼實作反複修正，設計與開發者共同參與，進而達到 1 + 1 > 2 的效果。元件的開發并不能一味地追求效率，從設計到實作都需要慢慢打磨。舉個例子，Typography 這個元件作為排版元件，看起來非常簡單，但是從設計到開發完成前前後後花了一個月的時間，API 經過了反複調整力求以最精簡的方式簡化開發者的記憶成本，同時也兼顧了拓展性。設計層面也是反複斟酌以達到中英文語境下都有很好的視覺效果。

在 v3 版本中，元件的性能問題主要出在對舊版 IE 的相容性需求上，因而不少實作隻能使用比較黑的方式，下面的問題會提到是以不重複提了。由于 v4 版本 IE 最低相容版本改成了 IE 11，這些不再是限制，進而使得我們有能力去逐漸更新，更好地提升性能。

在對 IE 的相容性方面做了一些取舍，原因是什麼？相容 IE 的難點都有哪些？

v3 版本為了相容舊版 IE，不得不做一些妥協。比如說 flex 布局不能用，我們就用 float 和 table 來搞；不能用 sticky，Table 為了實作固定列不得不額外再渲染一個 Table 達到固定列的效果。最近幾年，随着 windows 系統的更新，舊版 IE 的占比已經越來越小。這也是一個契機，讓我們在 v4 版本可以舍棄過于陳舊的 IE 版本，進而輕裝上陣。

相容 IE 的難點在于很多行為是非預期的，往往代碼沒有什麼問題，但是頁面渲染就是不正常。對于這種情況，就需要做不少的黑科技。比如說讓元件強制重新整理、使用 IE only 的 css hack 等等。此外前面提到的很多 HTML 新特性在 IE 環境下無法使用，隻能自行模拟導緻嚴重的性能損耗。

你認為 antd 目前對 TypeScript 的支援到位了嗎？如果還有欠缺，主要在哪些地方，将怎麼解決？

在 v3 版本中，我們大量底層元件是通過 js 編寫，因而 ts 的類型定義是在 antd 上額外做的，這樣的缺點就是和底層的元件并不完全比對。在 v4 版本中，我們将大量底層元件也轉成了 ts 版本，在 antd 端直接使用這些定義，進而避免了過去定義不比對的情況。當然，這個過程也不是一蹴而就的，還有一分部底層元件還沒有完成轉，歡迎社群的同學一同幫助讓 ts 定義做得更好。

除此之外，我們也遇到一些有趣而惱人的問題——那就是由于 typescript 和 @types/react 本體的更新，導緻原本的 ts 定義失效。過去有過一段時間，antd 的 Button 每周都在更新 ts 定義來适配最新的 @types/react。這種情況在所難免，保持更新即可。

在釋出公告裡專門提到了 @saeedrahimi @shaodahong 兩位社群同學的貢獻，能否具體介紹下這裡面的故事？

@saeedrahimi 同學他為 v4 貢獻了全部元件的 RTL 國際化能力，改了數千行代碼。這個功能非常大，過一次 PR 可以看到眼花。就這樣我們一遍遍地 Review & Update，最終将其實作，中間非常不容易。

@shaodahong 其實在 v3 時就已經是熱心志願者了，在 v4 的釋出中，也幫助做了很多的工作，其中相容包的開發主要是由他完成的。通過相容包，開發者可以以盡可能小的成本來将 antd 從 v3 更新到 v4。

當然，除了這兩位同學外，還有非常多的志願者參與了 v4 的開發工作。借這個機會，再次向各位志願者表示感謝！

有部分使用者回報社群反哺困難，源碼使用 rc-* 封裝實作，導緻開發者想幫忙修複 bug 卻望而卻步，這方面有考慮如何解決嗎？antd 團隊是怎樣看待與社群開發者之間的聯系和互動的？

rc 元件的設計思想是簡單且靈活，因而它不會對樣式有強依賴。而 antd 除了元件功能外，還有着自己的設計體系，是以在 UI Design 上也會更重一些。這種劃分，使得如果使用者隻想用元件的功能卻不需要它的樣式就可以直接基于 rc 元件進行封裝。舉個例子，Form 的底層元件 rc-field-form 本身完全不帶樣式，而在 antd 出則是封裝出帶樣式的 Form 和 Form.Item 且不暴露底層的 Field 元件。其實在 v4 釋出前，已經有不少的社群同學基于 rc-field-form 封裝出自己的元件了。兩者從設計思想上是不同的，因而在未來也不會合并。

從發 PR 角度看，其實不必有太多的心理負擔。元件各司其職，不會因為底層多一個 rc 元件庫就望而卻步。其實從平時的維護看，志願者給 antd 和 rc 發 PR 的熱情是一樣的，不存在有 bug 因為在 rc 元件裡就修不了的情況。甚至有時候反過來，有的使用者隻用了 rc 元件，因而給 rc 元件發了很多的 PR 來幫助改進，這也使得這些 PR 同樣反哺給了 antd。

後續的版本規劃是怎樣的？未來還将有哪些值得期待的新特性？

v4 版本在釋出後，由于大量元件的重構，主要精力暫時會聚焦于 bug fix 上。待其穩定後，我們會為 React 未來的 Concurrent 模式做好準備。此外，也有計劃為了 css in js 做一下調研，以支援動态切換主題的能力。當然，就像剛剛說的，目前的首要任務還是聚焦在 bug fix 上。

作為被廣泛使用的前端明星開源項目，你認為 antd 發展至今取得成功的原因是什麼？開源這幾年最大的收獲和教訓是什麼？

Ant Design 受歡迎離不開社群同學的支援，是大家的認可才使得 Ant Design 能夠走到今天。一個開源項目的成活，除了維護者的保持更新外，也需要來自社群的力量。開源界中，你會看到非常多的優秀項目。但是随着時間推移，逐漸不再維護。因而如何保持項目的活力是重中之重。

Ant Design 從 2015 年寫下第一行代碼至今走過了不少年頭。最大的收獲就是來自社群同學的幫助，來一起把 Ant Design 打造成一流的前端元件庫。而同時作為開源項目，也必須按照開源的方式來公開透明的維護項目。進而不辜負社群同學的信任。