基于React antd二次封装前端组件库思路

简介: 在目前团队中,前端组件主要使用的是antd,但是样式和设计那边总有些出入。在快速迭代下,不可能有精力去实现设计的要求,并且每个迭代的需求很可能并不相交,所以即使某个前端同学改了什么别人也不甚清楚,如果交给每个开发同学去修改,又无法做到统一,一旦发生变更将会产生庞大的工作量,而在敏捷迭代中,为了最大化拥抱业务、追求开发效率,很多开发同学也是直接套用之前的样式,没有及时抽成组件,写法上也有不兼容的情况,直接后果就是导致代码越来越不优雅,项目越来越笨重。基于以上原因考虑是否能做一个基于 antd 的组件库,一个基于 antd 封装的组件库,打成包,其中的组件可以慢慢的实现。

一、优化组件库基本需求
1.站在研发效率和时间成本的角度,设计组件库需要能提高协作效率。
2.设计组件库能成为团队的技术资产,新同事来公司后可以快速调用和上手,就算有同事离职,也不会对产品的整体体验造成影响。
3.设计组件库可以让产品体验统一,有助于团队建立统一的产品品牌认知,方便销售和运营包装、运营、策划产品方案。
二、封装思路
基于UI做定制化的组件库具体要做什么?
1.样式上:基于开源框架的组件封装成公司的产品UI设计的特有样式的组件,以及封装常用的布局样式。
2.功能上:沉淀开源框架中没有的常用组件。
三、开发准则
1.小步快跑快速迭代
对于组件封装,组件专门的组件组,负责收集用户使用过程中产生的操作体验问题,并对问题进行抽象、剥离、汇总,之后对目前使用的组件进行修改优化,值得注意的是组件小组对于组件的更新迭代需要考虑版本号,需要考虑向下兼容等问题。
2.测试组件库的可用性
对于组件的封装,需要进行完善的测试,对于组件完成后应该组织全员宣讲,并准备完善的API文档、demo实例,方便开发人员快速查询,在使用组件后应同步测试人员进行交互逻辑测试,这里应该是一个长期工作,建议保持组件迭代。
四、组件的类型划分
1.按照逻辑和视图划分:容器型组件(Container)与展示型组件(stateless)
2.按照状态划分:有状态组件和无状态组件
3.按照 UI 划分:布局组件和内容组件
4.纯组件和非纯组件

相关文章
|
11月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
354 0
React - 实现一个基于 Antd 的数值范围组件
|
10月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
493 2
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
1417 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1113 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
753 83
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
501 9
|
11月前
|
前端开发 安全 数据安全/隐私保护
React - 实现一个基于 Antd 的密码强度校验组件
这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。
514 0
React - 实现一个基于 Antd 的密码强度校验组件
|
JavaScript 前端开发 API
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
568 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
2971 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App