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 支持。
• 移动设备支持。

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

• Compose 组合
• Form 表单

其它的一些规范：

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

样式规范

组件样式规范：

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

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

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

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

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

网址

• GitHub - 欢迎大家点亮Star🌟
• React DevUI 官网
• React DevUI Admin 官网

— END —

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