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，一起交流前端技术、一起做开源！