
这些年做 React 项目,我一直算不上组件库的拥护者。
甚至可以说,我天然对组件库有点抗拒。
因为我一直觉得,UI 本身就是业务的一部分,而不是一个简单的依赖包。
所以在自己的项目里,我基本都是自己写组件。
从 Button、Input 到 Dialog、Dropdown,再到各种业务组件,能自己控制的我都会自己控制。
一方面是因为定制自由度更高。
另一方面也是因为我不太喜欢被组件库的设计思路绑架。
很多组件库都会让我产生一种束缚感:
样式覆盖困难
API 设计不符合习惯
业务稍微复杂一点就需要二次封装
最后绕了一圈还是得自己写
所以这些年我一直更偏向于:
Headless UI
自定义组件
自己维护设计体系
但有一个例外。
那就是 Ant Design。
说实话,我一直不觉得它是最漂亮的组件库,也不觉得它是最先进的组件库。
甚至很多时候,如果是个人项目,我未必会选择它。
但如果让我评价国内市场最成功、最符合企业实际需求的生产级组件库,我还是会毫不犹豫地投 Ant Design 一票。
尤其是最近几年持续使用 Ant Design 5.x 之后,这种感觉反而越来越强烈了。
很多组件库给我的感觉是:
先设计组件,再去寻找适合它的场景。
Ant Design 刚好相反。
它更像是先经历了大量真实业务,然后再把这些业务场景抽象成组件。
所以你会发现它很多组件的存在都特别合理。
例如:
Table
Form
Tree
Upload
Cascader
Transfer
Drawer
这些组件可能没有那么惊艳。
但它们真的非常实用。
因为这些恰恰就是国内后台项目里每天都在使用的东西。
很多国外组件库的重点可能放在:
Button
Card
Tabs
Dialog
这些基础组件上。
但真正到了企业项目里,开发时间消耗最多的往往不是这些。
而是:
表格
表单
权限树
文件上传
多级选择器
这些复杂组件。
而 Ant Design 在这些地方的积累确实非常深。
甚至很多团队选择 Ant Design,本质上就是冲着 Table 和 Form 去的。
我一直觉得 Ant Design 最大的成功,不是技术层面的成功。
而是场景层面的成功。
如果观察国内互联网项目,会发现大量系统都属于:
ERP
CRM
OA
CMS
数据平台
运营后台
财务系统
政务系统
这些系统有一个共同特点:
信息密度极高。
用户打开页面不是为了欣赏设计。
而是为了完成工作。
他们更关心:
数据能不能快速找到
操作能不能快速完成
页面能不能少点跳转
一屏能不能展示更多内容
这时候很多国外设计体系强调的:
留白
品牌感
沉浸式体验
反而不是第一优先级。
而 Ant Design 的设计语言几乎就是围绕国内中后台场景构建出来的。
这一点我觉得特别重要。
因为很多组件库是在解决 UI 问题。
而 Ant Design 更像是在解决业务效率问题。
如果让我说 Ant Design 最核心的竞争力是什么。
我会直接回答:
Form 和 Table。
很多组件库都有表单和表格。
但真正做到生产级别的并不多。
尤其是复杂业务场景。
很多国外方案到了后期都会出现类似情况:
校验自己拼
联动自己写
表格能力自己扩展
搜索区域自己封装
最后项目里会出现大量重复代码。
而 Ant Design 的 Form 和 Table 在绝大多数企业项目里已经足够成熟。
例如:
固定列
固定表头
排序
筛选
分页
展开行
动态校验
表单联动
这些需求基本都能直接满足。
很多时候我甚至觉得:
Ant Design 最厉害的地方不是功能多。
而是它提前帮你踩过了无数企业项目里的坑。
这一点经常被低估。
很多国外优秀组件库其实也很好。
甚至从设计理念上来说可能更先进。
但真正落地的时候会发现一个现实问题:
出了问题怎么办?
很多时候只能:
翻英文文档
看 GitHub Discussion
搜 Stack Overflow
对于个人开发者来说问题不大。
但对于团队来说,效率差距会非常明显。
而 Ant Design 的生态完全不同。
无论是:
官方文档
GitHub Issue
掘金
CSDN
知乎
各种博客文章
几乎都能找到对应案例。
很多问题甚至直接搜索中文就能解决。
这种生态优势平时感觉不到。
但项目周期越长,团队规模越大,它的价值就越明显。
虽然我自己的项目基本不会依赖完整组件库。
但在公司项目里。
我现在最喜欢的组合其实是:
Ant Design 5.x + TailwindCSS 3.x
甚至可以说,这是目前我认为兼顾效率和自由度最舒服的一套方案。
原因很简单。
Ant Design 负责解决:
复杂组件
企业级交互
表单体系
表格体系
中后台基础设施
而 TailwindCSS 负责解决:
页面布局
间距控制
响应式适配
快速样式调整
个性化定制
以前很多人吐槽 Ant Design 最大的问题是样式定制成本高。
但到了 5.x 之后:
Design Token
CSS-in-JS
主题能力
其实已经改善了很多。
再配合 TailwindCSS。
很多页面开发体验已经非常舒服了。
复杂组件直接用 Ant Design。
布局和细节交给 Tailwind。
两者几乎没有什么冲突。
反而形成了一种非常好的互补关系。
至少在我参与过的几个公司项目里,这套组合的开发效率都非常高。
后来我越来越觉得。
很多人以为 Ant Design 是组件库。
实际上它更像是一套企业级解决方案。
它提供的不是:
<Button />
<Input />
<Card />
这些基础组件。
而是一整套中后台开发的方法论。
包括:
设计规范
交互规范
组件规范
页面布局规范
数据展示规范
数据录入规范
权限管理思路
甚至连 Ant Design Pro 都帮你把很多项目基础设施提前搭好了。
对于企业项目来说。
这种价值远比几个好看的按钮重要。
因为真正昂贵的从来不是组件开发。
而是团队协作成本。
我依然不算一个特别喜欢组件库的人。
如果是个人项目或者产品项目。
我还是更倾向于自己掌控 UI。
毕竟自己写组件最大的优势就是:
想怎么设计就怎么设计。
但如果是企业级后台开发。
我越来越能理解为什么这么多团队最终都会选择 Ant Design。
因为它解决的从来不是:
组件够不够多。
而是:
如何让一个团队更快、更稳定、更低成本地交付业务。
这一点其实非常难。
因为它不仅仅是技术问题。
还涉及:
团队协作
设计统一
开发效率
维护成本
新人上手成本
而 Ant Design 在这些方面确实做得非常成熟。
所以我现在对 Ant Design 的评价其实很简单:
它未必是最现代的组件库。
未必是最自由的组件库。
甚至未必是最好看的组件库。
但它大概率是国内市场最懂生产环境、最懂企业后台、也最懂研发团队协作的一套组件体系。
对于个人项目,我可能还是会坚持自己写组件。
但对于公司项目来说。
Ant Design 5.x + TailwindCSS 3.x,已经是我目前最舒服、也最愿意长期使用的一套前端组合了。
![[鸣潮·共鸣与群星_害羞]](https://i0.hdslb.com/bfs/garb/item/a9c5c20f333922667c2d33817d726fddab7e1ac0.png)