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

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

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

相关文章
|
7月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
435 83
|
7月前
|
JavaScript 前端开发 API
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
251 9
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
2242 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
12月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
723 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
12月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
186 2
|
12月前
|
前端开发 JavaScript 算法
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
366 0
|
12月前
|
前端开发 JavaScript API
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
358 0
|
1月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
6月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
269 68

热门文章

最新文章