如何自建一个类似antd的组件库?

一、自研的优缺点

优点:

  • 代码控制力强,可以结合不同组件库的特性。
  • 可以使用社区最新的生态组件,没有历史遗留负担。

缺点:

  • 开发成本高
  • 维护成本高

我放弃 antd 的理由 - 掘金

关于自建组件库的思考 - 掘金

二、组件库的概念区分

juejin.cn/post/723971...

从上图可以很清晰的看出,我们所构建的 UI 分为 3 个部分。

  • CSS ++
  • Behavior Libraries
  • Style System

我们所熟知的 antd 就是由他的行为库 react-component 加上设计规范 Antd Design 构成。在我们使用 antd 来构建 UI 的时候,通常我们会加上自己的样式扩展,三者交汇在一起,构成了我们的 UI

这在纯应对业务上没有什么问题,可以说算是比较不错的选择。但是很多时候我们不仅仅需要满足功能上的需求,更重要的是我们需要足够的个性化以及差异化。

三、技术选型

(1)Behavior Libaries 选择 shadcn/ui

www.libhunt.com/compare-ui-...

headlessui的组件数量比较有限,像Form、Button都没有。

shadcn/ui文档更加完善一些,包括主题、深浅色如何配置,更加细致,不过2023年才出。通过copy形式进行代码二次编写

(2)Css++使用的tailwindcss

四、理解antd、arco、semi等组件库的机制思路。

"在 Design Token 中我们提供了一套更加贴合设计的三层结构,将 Design Token 拆解为 Seed Token、Map Token 和 Alias Token 三部分。这三组 Token 并不是简单的分组,而是一个三层的派生关系,由 Seed Token 派生 Map Token,再由 Map Token 派生 Alias Token。在大部分情况下,使用 Seed Token 就可以满足定制主题的需要。但如果您需要更高程度的主题定制,您需要了解 antd 中 Design Token 的生命周期。"

antd4 的less变量对应着 antd5的component token。ant.design/docs/react/...

antd作为开源库,有了这种seed token就可以轻易定制主题,十分方便。

公司内部建设组件库,不建议使用这种阶梯型的token机制,因为没有应用场景,而且会增加token之间的算法、如何映射维护的复杂度;以及token命名会变得复杂。

另外arco.design/react/docs/... antd的map token:ant.design/theme-edito... token的阶梯概念。

五、公司组件库怎么去支持主题定制的需求??

(一)全局:参照antd map token 和arco设置全局的 token变量值。

(二)组件内:根据token使用css变量,

可以考虑使用tailwindcss 实现样式ui.shadcn.com/docs/themin...

六、暗黑模式和浅色模式

(一)antd方法

通过修改算法可以快速生成风格迥异的主题,5.0 版本中默认提供三套预设算法,分别是默认算法 theme.defaultAlgorithm、暗色算法 theme.darkAlgorithm 和紧凑算法 theme.compactAlgorithm。你可以通过修改 ConfigProvider 中 theme 属性的 algorithm 属性来切换算法。

你的页面的整体风格,需要利用一些 CSS 变量 调整为暗色。

(二)arco参照: arco.design/react/docs/...

通过设置 arco-theme 为 dark,只是将组件库切换成了暗色模式,你的页面的整体风格,需要利用一些 CSS 变量 调整为暗色。具体可查看变量

七、组件库的默认参数值

(1) arco实现了更改组件默认配置功能;antd没有该功能。

(2)antd有修改组件的classnames和style的功能(5.7.0)

八、组件库和D2C

(一)antd官方维护的是sketch组件包;有非官方维护的figma。

ant.design/docs/resour...

(二)semi对figma的支持更好?semi.design/zh-CN/start...

(1)主题定制后,可以通过C2D生成UIKIT, 避免UI手工大量工作去生成UIKIT;这部分工作也是UI不愿意去维护的。

目前antd无法做到这一点。

(2)semi同时支持D2C的功能。这点antd也没有去实现。

相关推荐
拉不动的猪4 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
尤物程序猿5 小时前
【2025面试Java常问八股之redis】zset数据结构的实现,跳表和B+树的对比
数据结构·redis·面试
牛马baby6 小时前
Java高频面试之并发编程-07
java·开发语言·面试
DKPT7 小时前
常见正则表达式整理与Java使用正则表达式的例子
java·笔记·学习·面试·正则表达式
智商低情商凑10 小时前
CAS(Compare And Swap)
java·jvm·面试
uhakadotcom10 小时前
人工智能如何改变医疗行业:简单易懂的基础介绍与实用案例
算法·面试·github
zizisuo10 小时前
面试篇:Spring Boot
spring boot·面试·职场和发展
uhakadotcom12 小时前
企业智能体网络(Agent Mesh)入门指南:基础知识与实用示例
后端·面试·github