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

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

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

相关文章
|
9天前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
40 4
React开发需要了解的10个库
|
7天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
6天前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
26 1
引领前端未来:React 19的重大更新与实战指南🚀
|
5天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
38 1
|
8天前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
11 2
|
8天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
8天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
10天前
|
资源调度 前端开发 JavaScript
React中classnames库使用
【10月更文挑战第7天】
|
10天前
|
前端开发 JavaScript API
深入理解前端框架:React 和 Vue 的比较
【10月更文挑战第7天】深入理解前端框架:React 和 Vue 的比较
|
10天前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
10 0