如何自建一个类似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也没有去实现。

相关推荐
拉不动的猪42 分钟前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
Zevalin爱灰灰3 小时前
面试可能会遇到的问题&回答(嵌入式软件开发部分)
stm32·单片机·面试·操作系统·嵌入式·ucos
蛇皮划水怪4 小时前
代码随想录-图论-图经典算法
面试
uhakadotcom4 小时前
阿里云Tea OpenAPI:简化Java与阿里云服务交互
后端·面试·github
uhakadotcom5 小时前
图像识别中的三大神经网络:Inception、ResNet和VGG
算法·面试·github
uhakadotcom6 小时前
DeepFM算法:提升CTR预估和推荐系统的强大工具
算法·面试·github
uhakadotcom6 小时前
Python 中的 @staticmethod 和 @classmethod 详解
后端·面试·github
uhakadotcom7 小时前
单点登录的两大核心技术:SAML和OIDC
后端·面试·github
我是哪吒7 小时前
分布式微服务系统架构第94集:Kafka 消费监听处理类,redisson延时队列
后端·面试·github
hhope7 小时前
🧀 【实战演练】从零搭建!让复制粘贴上传文件“跑起来” (Node.js 后端版)
前端·javascript·面试