Ant Design 4.0有哪些更新

這篇文章主要為大家展示了“Ant Design 4.0有哪些更新”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Ant Design 4.0有哪些更新”這篇文章吧。

Ant Design 4.0 發(fā)布了，這次帶來(lái)了哪些重磅的更新？

本次發(fā)布了一些重大更新。比如我們添加了暗黑主題，無(wú)邊框組件，RTL 國(guó)際化支持，Table 、Form、Select 等等的組件重做從而大幅提升性能。由于內(nèi)容非常多 ，避免直接變成發(fā)布文檔。歡迎移步至語(yǔ)雀查看完整更新：《Ant Design 正式版來(lái)了！》

經(jīng)過(guò)多年發(fā)展，Ant Design 已經(jīng)成為一個(gè)生態(tài)，請(qǐng)介紹下這個(gè)生態(tài)包括哪些重要成員，生態(tài)今后的演進(jìn)方向是什么？

Ant Design（以下簡(jiǎn)稱 antd） 作為一個(gè)設(shè)計(jì)體系，包含的不僅僅是一個(gè)組件庫(kù)。除了耳熟能詳?shù)?Ant Design React 外，還有 Angular 版本的 NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React，以及來(lái)自社區(qū)志愿者的 Ant Design Vue。垂直方向開箱即用的中臺(tái)前端 / 設(shè)計(jì)解決方案 Ant Design Pro 和對(duì)應(yīng)的區(qū)塊市場(chǎng)，以及衍生組件庫(kù) Pro Layout 和 Pro Table。設(shè)計(jì)上也提供了非常多的規(guī)范文檔以及相關(guān)的設(shè)計(jì)資產(chǎn)。

Ant Design 像是一顆樹，在其之上開枝散葉非常的有想象空間。未來(lái)首先還是會(huì)繼續(xù)基于設(shè)計(jì)體系進(jìn)行深耕，其次會(huì)跟隨相關(guān)框架一同進(jìn)步。同時(shí) Ant Design 還會(huì)立足于真實(shí)的業(yè)務(wù)需求，來(lái)豐富生態(tài)產(chǎn)品。

在從 3.0 到 4.0 的過(guò)程中，antd 團(tuán)隊(duì)攻克的最大難題是什么？最自豪的新特性是什么？

v4 版本和社區(qū)同學(xué)一起重構(gòu)了大量的底層組件，從而大幅提升了組件渲染性能。舉個(gè)例子，v3 版本中 Form 組件的字段更新會(huì)使得整個(gè) Form 重新渲染，這在大型表單中會(huì)有嚴(yán)重的性能問(wèn)題。在 v4 中，F(xiàn)orm 只會(huì)更新相關(guān)的字段組件，從而大大降低了渲染時(shí)長(zhǎng)。在 Tree、Select、TreeSelect 等組件內(nèi)置虛擬滾動(dòng)，從而大幅減少了實(shí)際渲染的元素。

說(shuō)到比較難的，就是這次重構(gòu)由于支持虛擬滾動(dòng)，所以需要處理基于虛擬滾動(dòng)的動(dòng)畫收縮伸展方案。舉個(gè)例子，Tree 組件在 v3 版本中，縮放可以通過(guò)原生的 transition 與 height 來(lái)實(shí)現(xiàn)收縮伸展效果。但是在虛擬滾動(dòng)中，每個(gè)元素其實(shí)是獨(dú)立的元素，所以縮放時(shí)如果要達(dá)到和 v3 一致的動(dòng)畫效果，就需要將與之相關(guān)的算法自行實(shí)現(xiàn)。因而我們將其劃分為多個(gè)階段，在不同的階段處理不同的邏輯，從而組合出支持虛擬滾動(dòng)的動(dòng)畫實(shí)現(xiàn)。具體實(shí)現(xiàn)邏輯比較復(fù)雜，如果感興趣可以查看 rc-virtual-list 的相關(guān)代碼。

antd 在設(shè)計(jì)上是如何權(quán)衡效率、性能 / 體驗(yàn)和質(zhì)量三者的？

個(gè)人角度看，后三者者其實(shí)并不矛盾。Ant Design 的組件開發(fā)一般有以下幾個(gè)步驟：

• 設(shè)計(jì)師設(shè)計(jì)視覺(jué)、交互稿；

• 工程師進(jìn)行開發(fā)；

• Code Review & 設(shè)計(jì)師評(píng)審。

中間每個(gè)環(huán)節(jié)都會(huì)認(rèn)真負(fù)責(zé)地完成，其中 Code Review 部分也是最漫長(zhǎng)的階段。Code Review 環(huán)節(jié)會(huì)對(duì) API 以及代碼實(shí)現(xiàn)反復(fù)修正，設(shè)計(jì)與開發(fā)者共同參與，從而達(dá)到 1 + 1 > 2 的效果。組件的開發(fā)并不能一味地追求效率，從設(shè)計(jì)到實(shí)現(xiàn)都需要慢慢打磨。舉個(gè)例子，Typography 這個(gè)組件作為排版組件，看起來(lái)非常簡(jiǎn)單，但是從設(shè)計(jì)到開發(fā)完成前前后后花了一個(gè)月的時(shí)間，API 經(jīng)過(guò)了反復(fù)調(diào)整力求以最精簡(jiǎn)的方式簡(jiǎn)化開發(fā)者的記憶成本，同時(shí)也兼顧了拓展性。設(shè)計(jì)層面也是反復(fù)斟酌以達(dá)到中英文語(yǔ)境下都有很好的視覺(jué)效果。

在 v3 版本中，組件的性能問(wèn)題主要出在對(duì)舊版 IE 的兼容性需求上，因而不少實(shí)現(xiàn)只能使用比較黑的方式，下面的問(wèn)題會(huì)提到所以不重復(fù)提了。由于 v4 版本 IE 最低兼容版本改成了 IE 11，這些不再是限制，從而使得我們有能力去逐漸更新，更好地提升性能。

在對(duì) IE 的兼容性方面做了一些取舍，原因是什么？兼容 IE 的難點(diǎn)都有哪些？

v3 版本為了兼容舊版 IE，不得不做一些妥協(xié)。比如說(shuō) flex 布局不能用，我們就用 float 和 table 來(lái)搞；不能用 sticky，Table 為了實(shí)現(xiàn)固定列不得不額外再渲染一個(gè) Table 達(dá)到固定列的效果。最近幾年，隨著 windows 系統(tǒng)的升級(jí)，舊版 IE 的占比已經(jīng)越來(lái)越小。這也是一個(gè)契機(jī)，讓我們?cè)?v4 版本可以舍棄過(guò)于陳舊的 IE 版本，從而輕裝上陣。

兼容 IE 的難點(diǎn)在于很多行為是非預(yù)期的，往往代碼沒(méi)有什么問(wèn)題，但是頁(yè)面渲染就是不正常。對(duì)于這種情況，就需要做不少的黑科技。比如說(shuō)讓組件強(qiáng)制刷新、使用 IE only 的 css hack 等等。此外前面提到的很多 HTML 新特性在 IE 環(huán)境下無(wú)法使用，只能自行模擬導(dǎo)致嚴(yán)重的性能損耗。

你認(rèn)為 antd 目前對(duì) TypeScript 的支持到位了嗎？如果還有欠缺，主要在哪些地方，將怎么解決？

在 v3 版本中，我們大量底層組件是通過(guò) js 編寫，因而 ts 的類型定義是在 antd 上額外做的，這樣的缺點(diǎn)就是和底層的組件并不完全匹配。在 v4 版本中，我們將大量底層組件也轉(zhuǎn)成了 ts 版本，在 antd 端直接使用這些定義，從而避免了過(guò)去定義不匹配的情況。當(dāng)然，這個(gè)過(guò)程也不是一蹴而就的，還有一分部底層組件還沒(méi)有完成轉(zhuǎn)，歡迎社區(qū)的同學(xué)一同幫助讓 ts 定義做得更好。

除此之外，我們也遇到一些有趣而惱人的問(wèn)題——那就是由于 typescript 和 @types/react 本體的升級(jí)，導(dǎo)致原本的 ts 定義失效。過(guò)去有過(guò)一段時(shí)間，antd 的 Button 每周都在更新 ts 定義來(lái)適配最新的 @types/react。這種情況在所難免，保持更新即可。

在發(fā)布公告里專門提到了 @saeedrahimi @shaodahong 兩位社區(qū)同學(xué)的貢獻(xiàn)，能否具體介紹下這里面的故事？

@saeedrahimi 同學(xué)他為 v4 貢獻(xiàn)了全部組件的 RTL 國(guó)際化能力，改了數(shù)千行代碼。這個(gè)功能非常大，過(guò)一次 PR 可以看到眼花。就這樣我們一遍遍地 Review & Update，最終將其實(shí)現(xiàn)，中間非常不容易。

@shaodahong 其實(shí)在 v3 時(shí)就已經(jīng)是熱心志愿者了，在 v4 的發(fā)布中，也幫助做了很多的工作，其中兼容包的開發(fā)主要是由他完成的。通過(guò)兼容包，開發(fā)者可以以盡可能小的成本來(lái)將 antd 從 v3 升級(jí)到 v4。

當(dāng)然，除了這兩位同學(xué)外，還有非常多的志愿者參與了 v4 的開發(fā)工作。借這個(gè)機(jī)會(huì)，再次向各位志愿者表示感謝！

有部分用戶反饋社區(qū)反哺困難，源碼使用 rc-* 封裝實(shí)現(xiàn)，導(dǎo)致開發(fā)者想幫忙修復(fù) bug 卻望而卻步，這方面有考慮如何解決嗎？antd 團(tuán)隊(duì)是怎樣看待與社區(qū)開發(fā)者之間的聯(lián)系和交互的？

rc 組件的設(shè)計(jì)思想是簡(jiǎn)單且靈活，因而它不會(huì)對(duì)樣式有強(qiáng)依賴。而 antd 除了組件功能外，還有著自己的設(shè)計(jì)體系，所以在 UI Design 上也會(huì)更重一些。這種劃分，使得如果用戶只想用組件的功能卻不需要它的樣式就可以直接基于 rc 組件進(jìn)行封裝。舉個(gè)例子，F(xiàn)orm 的底層組件 rc-field-form 本身完全不帶樣式，而在 antd 出則是封裝出帶樣式的 Form 和 Form.Item 且不暴露底層的 Field 組件。其實(shí)在 v4 發(fā)布前，已經(jīng)有不少的社區(qū)同學(xué)基于 rc-field-form 封裝出自己的組件了。兩者從設(shè)計(jì)思想上是不同的，因而在未來(lái)也不會(huì)合并。

從發(fā) PR 角度看，其實(shí)不必有太多的心理負(fù)擔(dān)。組件各司其職，不會(huì)因?yàn)榈讓佣嘁粋€(gè) rc 組件庫(kù)就望而卻步。其實(shí)從平時(shí)的維護(hù)看，志愿者給 antd 和 rc 發(fā) PR 的熱情是一樣的，不存在有 bug 因?yàn)樵?rc 組件里就修不了的情況。甚至有時(shí)候反過(guò)來(lái)，有的用戶只用了 rc 組件，因而給 rc 組件發(fā)了很多的 PR 來(lái)幫助改進(jìn)，這也使得這些 PR 同樣反哺給了 antd。

后續(xù)的版本規(guī)劃是怎樣的？未來(lái)還將有哪些值得期待的新特性？

v4 版本在發(fā)布后，由于大量組件的重構(gòu)，主要精力暫時(shí)會(huì)聚焦于 bug fix 上。待其穩(wěn)定后，我們會(huì)為 React 未來(lái)的 Concurrent 模式做好準(zhǔn)備。此外，也有計(jì)劃為了 css in js 做一下調(diào)研，以支持動(dòng)態(tài)切換主題的能力。當(dāng)然，就像剛剛說(shuō)的，目前的首要任務(wù)還是聚焦在 bug fix 上。

作為被廣泛使用的前端明星開源項(xiàng)目，你認(rèn)為 antd 發(fā)展至今取得成功的原因是什么？開源這幾年最大的收獲和教訓(xùn)是什么？

Ant Design 受歡迎離不開社區(qū)同學(xué)的支持，是大家的認(rèn)可才使得 Ant Design 能夠走到今天。一個(gè)開源項(xiàng)目的成活，除了維護(hù)者的保持更新外，也需要來(lái)自社區(qū)的力量。開源界中，你會(huì)看到非常多的優(yōu)秀項(xiàng)目。但是隨著時(shí)間推移，逐漸不再維護(hù)。因而如何保持項(xiàng)目的活力是重中之重。

Ant Design 從 2015 年寫下第一行代碼至今走過(guò)了不少年頭。最大的收獲就是來(lái)自社區(qū)同學(xué)的幫助，來(lái)一起把 Ant Design 打造成一流的前端組件庫(kù)。而同時(shí)作為開源項(xiàng)目，也必須按照開源的方式來(lái)公開透明的維護(hù)項(xiàng)目。從而不辜負(fù)社區(qū)同學(xué)的信任。

以上是“Ant Design 4.0有哪些更新”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！