我放棄 antd 的理由

作者：xinglee

原文：https://juejin.cn/post/7234893047284416570

如果你想看關(guān)于組件庫更全面的解析，請看這篇文章[1]

image.png

antd 有哪些問題

1. 樣式難以重置

如果你是 antd 的初學(xué)者，那么你可能會花大量的時間在重置樣式上。

有兩個 antd 新手常見的問題：

• 有些樣式是通過偽元素來實現(xiàn)的，除非直接覆蓋偽元素樣式，那么你寫的任何覆蓋樣式都不會生效
• Modal , Popover 這種 Portal 組件，默認(rèn)是掛載在 body 上的。如果你想要覆蓋這些組件的樣式,要么使用 getPopupContainer 屬性讓組件掛載在你指定的元素上，要么在組件中傳入 style , className 屬性，或者干脆直接寫全局樣式

除了新手常見的問題，還有組件庫都有的問題。比如自帶的組件 Icon 不能修改 , 動效添加、修改十分困難等等。

2.出了 bug 難以修改

image.png

雖然 antd 社區(qū)很活躍，響應(yīng)速度很快。但是如果你遇到了 bug，那么你只能到 github 上提 issue 或者 pr ，然后等待 antd 維護(hù)者的回復(fù)或者審核，等待新版本的發(fā)布。

這個過程可能會花費(fèi)你很多時間，而且最終你的 pr 也不一定會被合并，因為 antd 維護(hù)者可能會覺得你的 pr 不符合他們的設(shè)計理念。

3. 歷史包袱太重

這也是 antd 這一類組件庫的通病。大家都知道，react 的生態(tài)圈是非?；钴S的，隨著時間的流逝，社區(qū)會出現(xiàn)一些非常優(yōu)秀的組件，比如

• react-hooks-form [2]
• @tanstack/react-table [3]
• framer-motion [4]
• embla-carousel [5]
• zod [6]

但是 antd 的維護(hù)者不會考慮到這些組件，因為他們的組件庫已經(jīng)有了類似的組件，比如 Form , Table , Carousel 等等。

這些組件的核心邏輯可能都是好幾年前就已經(jīng)固定了。作為國內(nèi)最大的 react 組件庫，antd 的維護(hù)者不可能隨意修改這些組件核心邏輯，這就是一個沉重的歷史包袱。

那我們應(yīng)該選擇什么組件庫呢？

回答這個問題之前，我們先來看看上面社區(qū)優(yōu)秀的組件都有一個共同特點：Headless UI

Headless UI 是一種無樣式的可訪問組件，它們的唯一職責(zé)是管理組件的狀態(tài)變化，而不關(guān)心任何視覺方面的問題。

想必大家都已經(jīng)熟知 Headless UI 了，這里就不多說了。社區(qū)也有很多優(yōu)秀的 Headless UI 組件庫, 比如

• radix-ui [7]
• chakra-ui [8]
• headless ui [9]

那么為什么我最終選擇基于 radix-ui[10] 的 shadcn/ui[11] 呢？

1. shadcn/ui 并不是一個組件庫

image.png

shadcn/ui 并不是一個組件庫，它不能直接在 npm 下載，作者現(xiàn)在也暫時沒有計劃發(fā)布一個 npm包。

它只是一個 react 組件的集合。這些組件大多數(shù)都是基于 radix-ui 的 primitive 組件封裝的。

一些比較復(fù)雜的組件，比如Table , Form ( 在今天剛剛推出 ) 等等都是采用社區(qū)優(yōu)秀的組件 react-hooks-form，zod , @tanstack/react-table 來實現(xiàn)的。

使用 shadcn/ui 時 , 你可以直接復(fù)制組件的源碼到你的項目中，或者采用官網(wǎng)的 cli 工具

      
      npx?shadcn-ui?add?[component]

    

比如

      
      npx?shadcn-ui?add?alert-dialog

    

官方是基于 next.js, tailwindcss 的模版，但是這個倉庫并不是一個 npm 包。這意味著你可以盡情選擇自己喜歡的腳手架，構(gòu)建工具或者 css 寫法，比如 vite ,webpack ,create-react-app , sass , less styled-compoents 等等。

這么做的好處是，你可以完全控制組件的樣式，完全控制組件的邏輯，你可以隨意修改組件的任何東西。

2. 有一個統(tǒng)一的樣式規(guī)范

shadcn/ui 的組件都是 Headless UI，但是對于一個小公司或者個人來說，維護(hù)一個組件庫的樣式規(guī)范是很困難的，這是 Headless UI 的一個最大的缺點。

你可能只想向 antd 那樣開箱即用，所以 shadcn/ui 為你提供了一個統(tǒng)一的樣式規(guī)范，大體是極簡風(fēng)格，你可以直接使用它，也可以隨意修改它。

這是 shadcn/ui 的 Figma UI Kit[12]

image.png

總結(jié)

shadcn/ui 的出現(xiàn)完美解決了我上面提到的 antd 這類組件庫的問題。除此以外他還有打包體積小，輕量化的特點，得到了開源社區(qū)很多大佬的廣泛認(rèn)可，希望各位有機(jī)會都可以在項目中試用一下

參考資料

[1]

https://juejin.cn/post/7239714997710356537: https://juejin.cn/post/7239714997710356537

[2]

https://react-hook-form.com/: https://link.juejin.cn?target=https%3A%2F%2Freact-hook-form.com%2F

[3]

https://tanstack.com/table/v8: https://link.juejin.cn?target=https%3A%2F%2Ftanstack.com%2Ftable%2Fv8

[4]

https://www.framer.com/motion/: https://link.juejin.cn?target=https%3A%2F%2Fwww.framer.com%2Fmotion%2F

[5]

https://www.embla-carousel.com/: https://link.juejin.cn?target=https%3A%2F%2Fwww.embla-carousel.com%2F

[6]

https://github.com/colinhacks/zod: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fcolinhacks%2Fzod

[7]

https://www.radix-ui.com/: https://link.juejin.cn?target=https%3A%2F%2Fwww.radix-ui.com%2F

[8]

https://chakra-ui.com/: https://link.juejin.cn?target=https%3A%2F%2Fchakra-ui.com%2F

[9]

https://headlessui.com/: https://link.juejin.cn?target=https%3A%2F%2Fheadlessui.com%2F

[10]

https://www.radix-ui.com/: https://link.juejin.cn?target=https%3A%2F%2Fwww.radix-ui.com%2F

[11]

https://ui.shadcn.com/: https://link.juejin.cn?target=https%3A%2F%2Fui.shadcn.com%2F

[12]

https://www.figma.com/community/file/1203061493325953101: https://link.juejin.cn?target=https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1203061493325953101

最后

如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我個小忙：

1. 點個「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容

2. 我組建了個氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學(xué)習(xí)

3. 關(guān)注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。

點個喜歡支持我吧，在看就更好了