前端開(kāi)發(fā)使用Ant Design項(xiàng)目評(píng)價(jià)

更新時(shí)間：2022年08月12日 10:29:29 作者：欲三更

這篇文章主要為大家介紹了前端開(kāi)發(fā)使用Ant Design項(xiàng)目評(píng)價(jià)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

好的方面

作為前端開(kāi)發(fā)使用 Ant Design 1年多了，想說(shuō)幾句。

先說(shuō)好的方面——

它提供的大量功能比較全面且UI風(fēng)格統(tǒng)一的組件，能幫助開(kāi)發(fā)者快速搭建通用場(chǎng)景下的應(yīng)用界面。這大概是得益于螞蟻金服業(yè)務(wù)線上極為廣泛的應(yīng)用場(chǎng)景，驅(qū)動(dòng)了 Ant Design 團(tuán)隊(duì)通過(guò)對(duì)使用情況的觀察匯總，整理出來(lái)了這么一個(gè)組件庫(kù)。他們的經(jīng)驗(yàn)積累如此之豐富，足以讓這個(gè)庫(kù)支持大部分其他前端開(kāi)發(fā)者的需要。

其設(shè)計(jì)團(tuán)隊(duì)給出的設(shè)計(jì)規(guī)范相當(dāng)詳細(xì)且經(jīng)得起推敲，令許多其他團(tuán)隊(duì)獲益匪淺。

不好的方面

但我更想吐槽幾個(gè)不好的方面，都是針對(duì)其開(kāi)發(fā)團(tuán)隊(duì)的——

它“過(guò)于智能”，常常畫蛇添足。比如 Button 內(nèi)容為兩個(gè)漢字時(shí)會(huì)自動(dòng)在其間加上空格分隔，比如表單驗(yàn)證消息模版中，如果不提供 %s ，它會(huì)自動(dòng)將 %s 的對(duì)應(yīng)內(nèi)容添加到尾部，仿佛在說(shuō)“你忘了寫 %s，我?guī)湍阕詣?dòng)加上了，不用謝我喲！”。于是我想要在某個(gè)表單字段展示“此處必填”消息的時(shí)候，就會(huì)被迫變成“此處必填 field-name”。
維護(hù)者常常意氣用事。除了之前廣為人知的圣誕彩蛋事件，隨手翻閱一下該項(xiàng)目在 GitHub 的 issues ，就能看到類似的發(fā)言。“愛(ài)用用，不用gun”的交流方式，并不能幫助這個(gè)庫(kù)變得更好。

3. 部分組件設(shè)計(jì)不合理，且長(zhǎng)期未進(jìn)行優(yōu)化。最顯著的是 Form 組件，使用過(guò)它的朋友一定體會(huì)過(guò)其 getFieldDecorator API 的微妙感覺(jué)以及 Form.create API 的詭異體驗(yàn)。甚至上面的截圖里也吐槽了 Form。值得一提的還有 Modal 組件，提供了一個(gè) Modal.confirm 接口。讓我仿佛回到十年前那個(gè)寫 jQuery 的時(shí)代。維護(hù)者對(duì) React 的掌握不夠純熟，對(duì)于一些深度 bug 甚至不能充分理解，比如 Upload 組件的這個(gè) bug 。

4. TypeScript 支持欠佳。有的朋友可能會(huì)說(shuō)，”這個(gè)庫(kù)明明有 TS 支持，在編輯器里也有自動(dòng)提示，你不要亂黑“。我的意思是 Ant Design 的 TS 支持與它的量級(jí)不協(xié)調(diào)。這個(gè) Star 數(shù)萬(wàn)的庫(kù)，對(duì)于范型等TS的強(qiáng)力功能發(fā)揮甚少，還常常在諸如應(yīng)該寫為 'a' | 'b' | 'c' 的地方看到一個(gè)粗暴的 string ，甚至 any。

5. 社區(qū)反哺困難。讀過(guò)源碼的朋友應(yīng)該都發(fā)現(xiàn)了，antd 之下還有一套 rc-*的組件庫(kù)，一個(gè)功能簡(jiǎn)單的 antd 組件，往往需要通過(guò)極為冗長(zhǎng)的代碼來(lái)實(shí)現(xiàn)，當(dāng)你讀到尾部，又發(fā)現(xiàn)它用了一個(gè)來(lái)自 rc-* 的組件。如此種種，使得當(dāng)使用者想幫助修復(fù)一些簡(jiǎn)單的bug時(shí)，會(huì)望而卻步。

更新@2020

剛才因?yàn)橐S護(hù)一個(gè)使用了 antd 的老項(xiàng)目去官網(wǎng)看文檔，有些新發(fā)現(xiàn)。

剛打開(kāi)首頁(yè)時(shí)大部分交互都沒(méi)有反饋（默認(rèn)進(jìn)入最新的 4.0 版，而我想切換到 3.x 版本的，點(diǎn)擊沒(méi)反應(yīng)），很納悶。打開(kāi) DevTools 看到某個(gè)巨大的 JS 仍在加載，最終花了我將近 2 分鐘才好。聽(tīng)說(shuō) Ant Design - The world's second most popular React UI framework 是托管在 GitHub pages 的，大概是流量太大被限速了吧。當(dāng)我準(zhǔn)備瀏覽一番，卻發(fā)現(xiàn)非?？D。通過(guò) FPS meter 發(fā)現(xiàn) FPS 只有 10~12，我那沉默已久的風(fēng)扇呼地一聲轉(zhuǎn)了起來(lái)，我猜是開(kāi)發(fā)人員的電腦配置都比較好才沒(méi)發(fā)現(xiàn)這個(gè)問(wèn)題。

單就新首頁(yè)的體驗(yàn)來(lái)說(shuō)，有點(diǎn)差，不知道這次發(fā)布的 4.0 版本身變化有多大，是不是解決了我之前吐槽過(guò)的點(diǎn)，改天研究一下再來(lái)更新。

更新@2022

沒(méi)想到上面的“改天”這一改就是700多天。最近終于有機(jī)會(huì)使用了 Ant Design 4，對(duì)照原回答里的問(wèn)題更新一下感受。

在最近的使用中沒(méi)有遇到“過(guò)于智能”的問(wèn)題，但最近的使用深度也不如以往，基本只用到最常規(guī)最基礎(chǔ)的場(chǎng)景，希望維護(hù)團(tuán)隊(duì)是真的已經(jīng)避免了這個(gè)問(wèn)題。
現(xiàn)在重新審視 @afc163 在原回答截圖中的回復(fù)，我似乎比之前更能理解他的本意一些——大概是勸用戶改變使用方式，默認(rèn)了 Ant Design 的 Form 在設(shè)計(jì)上略有缺憾的意思。但我還是堅(jiān)持認(rèn)為這個(gè)表述方式不能令我滿意。我最近因?yàn)椴檎乙恍┦褂蒙系膯?wèn)題，有去翻 GitHub issue，沒(méi)有翻到比較新的回復(fù)。希望是改善了吧。
有看到 Form 組件已經(jīng)被優(yōu)化過(guò)了，粗看示例代碼里沒(méi)再看到 getFieldDecorator，但總體上感覺(jué)還是不那么美好，比較難受的是看到了通過(guò)對(duì) form 的 ref 引用來(lái)進(jìn)行數(shù)據(jù)操作。然后 Upload 組件的問(wèn)題似乎還是存在的？
TypeScript 支持改善了很多，現(xiàn)在 Ant Design 比較全面地使用 TypeScript 進(jìn)行了實(shí)現(xiàn)。補(bǔ)全效果是及格的，枚舉類型希望能更多一些，目前還是太多 string，估計(jì)是受限于更底層的 rc-* 的 TS 化進(jìn)度。
社區(qū)反哺依舊很困難，不知道這個(gè)問(wèn)題還要拖累這個(gè)庫(kù)多久？

另外這次淺嘗過(guò)程中發(fā)現(xiàn)一個(gè)挺無(wú)語(yǔ)的小問(wèn)題——我試著去調(diào)整 Tooltip 的動(dòng)效，通過(guò)類型提示得知與動(dòng)效相關(guān)的 transition 的 API 在底層的 rc-tooltip 已經(jīng)被廢棄了，應(yīng)該用新的 motion API，但是上層的 Tooltip 又幾乎寫死了 motion API，用戶只能用 transitionName 有限地調(diào)整 motion。