React DevUI 18.0 正式发布🎉 - Kagol
source link: https://www.cnblogs.com/kagol/p/16964838.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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，一起交流前端技术、一起做开源！
Recommend
-
8
2021 年最值得推荐的 7 个 Angular 前端组件库 仅限深圳｜现场揭秘：腾讯云原生数据库架构探索与实践 >> ...
-
7
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你...
-
6
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的...
-
7
Vue DevUI 已经有10个组件成员啦～🥳😋3个月之前，我们在社区发了一篇文章，正式发起了 Vue DevUI 项目。让我们一起建设 Vue DevUI...
-
3
Vue DevUI 又新添了11位新成员啦～🥳😋月初我们在掘金同步了 Vue DevUI 的最新进展：...
-
10
Vue DevUI是一个纯社区孵化和演进的vue3开源组件库，目前已经突破57位贡献者啦，组件数量也达到53个。
-
3
大家好，我是 Kagol，Vue DevUI 开源组件库和 EditorX 富文本编辑器创建者，专注于前端组件库建设和开源社区运营。 假如你是团队的前端负责人，现在老板要拓展新业务，需要开发一个 W...
-
4
现代管理学之父德鲁克在其经典著作《卓有成效的管理者》中对时间有一段精妙的论述，其要点如下： 时间是一项限制因素，任何生产程序的产出量，都会受到最稀有资源的制约，而时间就是其中最稀有的资源。 时间也是最特殊
-
7
大家好，我是 Kagol，Vue DevUI 作者，从2020年开始一直专注于前端开源组件库的建设，在前端开源组件库、开源社区运营方面积累了一些经验，2020年主要的创作也是围绕前端组件库和开源两个主...
-
9
大家好，我是 Kagol，个人公众号：前端开源星球。 一个月前，日日自新写了一篇介绍 Create Vite App 开...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK