不是所有的 react 组件库 都 powered by antd

302 阅读2分钟

标题虽然有点标题党的意思,不过就我个人来说,antd 毕竟发展了几年,对于各大公司、个人基于现有开源重新开发也没什么问题。毕竟重新造一个也需要时间成本、况且还需要经过大量的项目去实践。

就我自己而言,我自己也写了个组件库,也不是很特别想写的样子,毕竟这种东西,现在太多了,不过好像就 react 的话,基本上也没几个可选。也基本上都是 antd 一把梭,毕竟省时省力,何乐而不为。

写这文也不是为了喷啥的。自己虽然整了个组件库,但是目前来讲,也就是个个人玩具的样子,时间也差不多快一年了,依然是个半成品。主要中途在做一些别的事情,就和我去年的年度总结说的差不多,去年10月到今年4月,基本都在刷数据结构和算法,然后最近2个月在整个小东西,目前也快结束了,之后可能会去关注下组件库吧。

组件库从去年八月至今,里面大概集成了几十个组件(具体不知道,没数过),在这期间,给组件库加了一些相对有意思的东西,之后可能会作为文章进行发布吧。

目前挖的一些坑:

  • 生成组件库的 api 文档,这里是生成的 ts 的类型声明,虽然也提供了表格的形式,具体还需要完善下。
  • 给组件库加了个 playground,支持 typescript,你可以在playground 去写例子,并有完善的类型声明(不过这个,也需要完善)

后续的一些坑:

  • 对组件库在编辑器编写的时候,提供组件的 api 描述。
  • 单元测试(这个我可能不会写,毕竟也没啥用户,就这)。
  • 组件库文档切换到 vite(这个纯粹是因为 vite 开发体验比较好,虽然也遇到过一些坑)
  • 可能的一些其他计划。

说下技术栈吧:

  • React Hooks(18)
  • typescript(4.7)
  • scss
  • nodejs(16+)
  • webpack

兼容的话:

  • Chrome 86+ (因为涉及到了flex gap这个属性,所以兼容版本大概是这个)
  • Edge Chromium 86+

放点效果图:

image.png

1683d6dd7008fc461342ab620730021.png

差不多就是这样了,顺便丢个 Github,如果各位比较感兴趣,欢迎来个 star