React DevUI 18.0 正式发布🎉

Jay 是一位经验丰富并且对质量要求很高的开发者，对 Angular、React 等多种框架都很熟悉，我们在开源社区认识，在我做开源社区运营的过程中，Jay 给了我很多帮助，他也是 React DevUI 开源组件库的创建者。

2021年11月，由 Jay 主导发起了 React DevUI 开源组件库项目，经过一年多的孵化，终于在2022年11月23日发布 18.0.0 正式版本

特性：

基于最新的React 18+TypeScript+Nx技术栈
包含51个灵活、高质量的组件
包含配套的 Admin 系统（持续完善中）
支持主题定制
支持国际化
支持 TypeScript
支持 Monorepo
支持单元测试（持续完善中）
包含完善的设计指南 / 开发规范 / 贡献流程
完善的构建 / 发布 / 测试 / 依赖管理等基础设施

除了使用了最新的技术进行组件开发之外，React DevUI 还对组件的细节体验进行极致的打磨，比如：

所有组件和网站均遵循WCAG 2.0规范做了无障碍设计（Accessibility），比较明显的就是焦点管理和对键盘方向键的支持，欢迎到我们的官网体验。
针对大数据量的列表做了极致的虚拟滚动，渲染和筛选数十万数据无任何卡顿，感兴趣可以体验下我们的Select组件。
在API设计上，我们也经过了仔细的推敲和思考，所有组件的 API 都以易用和是否符合预期为设计原则，简洁、灵活、开发者友好，从Compose组件就可以窥见一斑。

为什么要开发这个组件库

接触前端从 Vue2 开始，深入学习的是 Angular（公司项目），这里插一句，Angular 作为前端开发者真的可以好好学一下，主要是学习其编程思想和比较与其它框架的差异。我个人对于 React 还是非常感兴趣的，所以当时就看了 React17 官网文档和相关教程，state => ui 这种纯粹的驱动模式简直是完美，我喜欢这种可靠的渲染，但奇葩的是异步函数里调用 setState 会立即重新渲染，虽然到目前为止我都没有过多时间了解 React18 之前的东西，不过当时我就想这绝对是个 bug 收集器。

可能缘分是个奇妙的东西，我不知道怎么就看到的 React18 的新特性，这个 concurrency（并发）那可真是看的我人麻了，这绝对会是目前最好的框架，那一刻 jay 知道必须写个组件库。

组件库的技术选型

开发组件库的技术栈为 react18 + ts + sass，react18 + ts 没啥好说的，这里说说为什么用 sass。

当初也有人建议用 css in js，其实在这之前我是不知道这个概念的，毕竟没用过 React，了解之后发现其灵活性的确是 sass 无法比拟的，但是我真的要为了这种灵活性舍弃：

开发成本，sass 作为最受欢迎的 css 扩展，但凡前端几乎了解，不了解的也无所谓，sass 完全兼容 css 语法。
样式独立，样式独立于组件，我希望开发其它框架组件时不用再写一套样式，本质是一种模块化，即样式的模块化，我相信好处不止于此。
性能。

最终我选择 sass，而且 sass + css 变量的灵活性不见得不如 css in js，特别是有样式规范的情况下。

组件遵循的规范

组件库从诞生之初就遵循下面最基本的规范：

如果有无障碍支持，那么一定要实现。
国际化（i18n）支持。
SSR 支持。
移动设备支持。

后面开发中添加了组件类支持：

其它的一些规范：

Prop 命名，如支持 form 的输入为 dModel，弹窗状态统一为 dVisible。
列表类组件的大数据支持，实现时间复杂度为 O(n)，如 Select 选择框。
一些边边角角我实在记不起来了。

样式规范

组件样式规范：

命名遵循 BEM 规范。
明显的聚焦或激活样式反馈。
内敛的动画，即动画变化属性数量尽可能少（一般小于等于 2 个），如 Button 聚焦时仅变化背景色或边框。

优势在于是由经验丰富的技术大佬主导的开源项目

说吧，为啥用你这组件库。

所有组件由 jay 开发，这意味着：

所有组件均遵循规范。
统一的 API 设计。
统一的样式设计。
性能的把控。
极简的大小，npm 包 未压缩 不超过 1MB！

网址

--- END ---

我是 Kagol，如果你喜欢我的文章，可以给我点个赞，关注我的掘金账号和公众号 Kagol，一起交流前端技术、一起做开源！