前言

看过我最近的一些文章的小伙伴应该都知道，博主最近半年时间一直在写自己的React组件库Concis，其实这也是从造轮子 -> 学习的目的去做这件事的，博主很多时间的屏幕都是这样的：

或者是这样：

是的，这很真实，因为写组件库单单从业务需求来说，就需要去参考，因此避免不了长时间翻阅arco design的官方文档，去看组件提供的api能力和一些demo

因此，博主一边开发Concis，一边给arco design贡献的旅程就开始了。

学习

博主最早开始写组件库其实也是想提高自己封装组件的能力，锻炼自己的业务能力，提高react代码编写质量，arco design的业务代码和对一个组件的思考、分配在这半年提高了博主很多。

比如一个简单的button组件，如果博主自己直接去写的话，可能就一个简单的Button.tsx就结束了，但是看了别人的代码以后，发现原来简单的组件也可以拆分出很多层，去快速定位bug出现的文件。

这些其实都是代码和设计层面的一些学习，从arco design中博主还学习到了整体项目的架构设计，在这个项目中，他们可以把样式设计成很多层，也就是平时所说的css工程，从分配到打包等等很多值得学习的地方，因此其实在平时除了看框架源码以外，我们也应该去看一些大厂开源的项目，去学习业务代码的编写，这对我们实际开发是有巨大的帮助。

后续博主也是在这半年的过程中，跟着arco design做了整个项目的规范化，如CICD、pnpm多包项目整合、css/js分离化打包、主题模式等等。

最近的文章中也是有很多的留言问：

为什么要重复造轮子？

我的答案是：Concis其实更像作者学习的一个成果，背靠大厂，选择更多star的组件库，这没问题，作者写这个组件库的目的其实也是学习好的组件的项目架构、编程思想仅此而已，如果必须要问Concis对比大厂组件库有什么独特的优势的话，答案是还在不断探索中，尝试在学习的同时取得突破，创造出独特的点。

提pr

当然，学习arco design的同时也是会找到许多bug的，作者写这篇文章的周末给字节提了5个pr，是的，你没有听错，5个。

这里拿一个bug来做例子:

不难发现，一个简单的css问题。

经过修改:

前面提到学习组件封装思想，这很简单，找到项目src/components目录，寻找对应的组件，就可以学习到很多，发现bug、定位bug也让博主锻炼到了大型项目改bug的能力。并且当改完以后，提交pull request后、最终采纳了你的意见、合并到主分支后、看到arco design贡献者名单上有你的头像，此时的成就感是很大的。

博主下班空余时间就是这样的一种状态。

• 开发Concis
• 学习arco design
• 给arco design提pr

当然，现在Concis的交流群已经有了40+同学，大家一起讨论学习，让Concis变得越来越好，博主也不是一个人在战斗了，这种感觉真不错。

在这里，认识了很多小伙伴，喜欢在下班的时候折腾、提升自己、志同道合的朋友，还是很不错的。

如何找到更多的bug，去提pr？

这里博主自己的建议是:

把自己模拟成用户，尝试组件各种props，结合在一起，去使用

举个例子，像下图中，Tabs组件提供了tabPosition、type两个prop。

那么在官方demo中，这看起来没有问题，那么如果像这样去使用呢？

<Tabs key='card' tabPosition="bottom" type="card">
    <TabPane key='1' title='Tab 1'>
    <Typography.Paragraph style={style}>Content of Tab Panel 1</Typography.Paragraph>
    </TabPane>
    <TabPane key='2' title='Tab 2'>
    <Typography.Paragraph style={style}>Content of Tab Panel 2</Typography.Paragraph>
    </TabPane>
    <TabPane key='3' title='Tab 3'>
    <Typography.Paragraph style={style}>Content of Tab Panel 3</Typography.Paragraph>
    </TabPane>
</Tabs>
1
2
3
4
5
6
7
8
9
10
11

这里默认的官方demo其实是tabPosition=top、type=line，使用两个非默认的组合在一起，很值得尝试，因为满足用户的场景多样化，在这种时候，样式会容易出问题。

哈哈哈，感觉很像是教人干坏事的样子~这其实是博主最近阶段的一些找bug经验。。

关于Concis

对于不熟悉这个项目的小伙伴们做个简单的介绍，Concis是一个基于React+TypeScript开发的一款轻量级组件库，全面拥抱React生态，支持React新特性(hooks/redux)追求轻量的组件体积，简单的使用方式，最小的思维负担。

其次也是感谢各位小伙伴的支持，Concis也是突破了100+star，让博主在开源路上不断充能，持续前进。

如果你想和博主一样，对封装组件有兴趣，但不知道在什么地方去实践、尝试、大胆地创造，你可以选择来Concis和博主一起学习、探索、造轮子。

最后，留一下Concis的一些地址。

Github

官方文档

其实博主之前也是一名github非活跃用户，自从有了写组件库的想法以后对开源的那种分享创作心情越来越狂热。

希望社区的小伙伴有兴趣的可以通过github的issue给我留言，我会主动并积极联系。 如果觉得这个仓库还不错，可以给我一个star或是告诉自己的朋友，我需要它让更多人看见。虔诚做事，心怀感恩。谢谢各位。