基于React antd二次封装前端组件库思路-阿里云开发者社区

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

2021-09-14 2269

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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