前言

看过我最近的一些文章的小伙伴应该都知道，博主最近半年时间一直在写自己的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分离化打包、主题模式等等。

扫描二维码关注公众号，回复： 14451313 查看本文章

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

为什么要重复造轮子？

我的答案是：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>
复制代码