React DevUI 18.0 正式发布🎉
<p>Jay 是一位经验丰富并且对质量要求很高的开发者，对 Angular、React 等多种框架都很熟悉，我们在开源社区认识，在我做开源社区运营的过程中，Jay 给了我很多帮助，他也是 React DevUI 开源组件库的创建者。</p><p>2021年11月，由 Jay 主导发起了 React DevUI 开源组件库项目，经过一年多的孵化🐣，终于在<code>2022年11月23日</code>发布 18.0.0 正式版本🎉</p>
<p>特性：</p>
<ul>
<li>基于最新的<code>React 18</code>+<code>TypeScript</code>+<code>Nx</code>技术栈</li>
<li>包含<code>51</code>个灵活、高质量的组件</li>
<li>包含配套的 Admin 系统（持续完善中）</li>
<li>支持主题定制</li>
<li>支持国际化</li>
<li>支持 TypeScript</li>
<li>支持 Monorepo</li>
<li>支持单元测试（持续完善中）</li>
<li>包含完善的设计指南 / 开发规范 / 贡献流程</li>
<li>完善的构建 / 发布 / 测试 / 依赖管理等基础设施</li>
</ul>
<p>除了使用了最新的技术进行组件开发之外，React DevUI 还对组件的细节体验进行极致的打磨，比如：</p>
<ul>
<li>🌈 所有组件和网站均遵循WCAG 2.0规范做了无障碍设计（Accessibility），比较明显的就是焦点管理和对键盘方向键的支持，欢迎到我们的官网体验。</li>
<li>⚡ 针对大数据量的列表做了极致的虚拟滚动，渲染和筛选数十万数据无任何卡顿，感兴趣可以体验下我们的Select组件。</li>
<li>✨ 在API设计上，我们也经过了仔细的推敲和思考，所有组件的 API 都以易用和是否符合预期为设计原则，简洁、灵活、开发者友好，从Compose组件就可以窥见一斑。</li>
</ul>
<h2 id="为什么要开发这个组件库">为什么要开发这个组件库</h2>
<p>接触前端从 Vue2 开始，深入学习的是 Angular（公司项目），这里插一句，Angular 作为前端开发者真的可以好好学一下，主要是学习其编程思想和比较与其它框架的差异。我个人对于 React 还是非常感兴趣的，所以当时就看了 React17 官网文档和相关教程，state => ui 这种纯粹的驱动模式简直是完美，我喜欢这种可靠的渲染，但奇葩的是异步函数里调用 setState 会立即重新渲染，虽然到目前为止我都没有过多时间了解 React18 之前的东西，不过当时我就想这绝对是个 bug 收集器。</p>
<p>可能缘分是个奇妙的东西，我不知道怎么就看到的 React18 的新特性，这个 concurrency（并发）那可真是看的我人麻了，这绝对会是目前最好的框架，那一刻 jay 知道必须写个组件库。</p>
<h2 id="组件库的技术选型">组件库的技术选型</h2>
<p>开发组件库的技术栈为 react18 + ts + sass，react18 + ts 没啥好说的，这里说说为什么用 sass。</p>
<p>当初也有人建议用 css in js，其实在这之前我是不知道这个概念的，毕竟没用过 React，了解之后发现其灵活性的确是 sass 无法比拟的，但是我真的要为了这种灵活性舍弃：</p>
<ul>
<li>开发成本，sass 作为最受欢迎的 css 扩展，但凡前端几乎了解，不了解的也无所谓，sass 完全兼容 css 语法。</li>
<li>样式独立，样式独立于组件，我希望开发其它框架组件时不用再写一套样式，本质是一种模块化，即样式的模块化，我相信好处不止于此。</li>
<li>性能。</li>
</ul>
<p>最终我选择 sass，而且 sass + css 变量 的灵活性不见得不如 css in js，特别是有样式规范的情况下。</p>
<h2 id="组件遵循的规范">组件遵循的规范</h2>
<p>组件库从诞生之初就遵循下面最基本的规范：</p>
<ul>
<li>如果有 无障碍 支持，那么一定要实现。</li>
<li>国际化（i18n）支持。</li>
<li>SSR 支持。</li>
<li>移动设备支持。</li>
</ul>
<p>后面开发中添加了组件类支持：</p>
<ul>
<li>Compose 组合</li>
<li>Form 表单</li>
</ul>
<p>其它的一些规范：</p>
<ul>
<li>Prop 命名，如支持 form 的输入为 <code>dModel</code>，弹窗状态统一为 <code>dVisible</code>。</li>
<li>列表类组件的大数据支持，实现时间复杂度为 O(n)，如 Select 选择框。</li>
<li>一些边边角角我实在记不起来了。</li>
</ul>
<h3 id="样式规范">样式规范</h3>
<p>组件样式规范：</p>
<ul>
<li>命名遵循 BEM 规范。</li>
<li>明显的聚焦或激活样式反馈。</li>
<li>内敛的动画，即动画变化属性数量尽可能少（一般小于等于 2 个），如 Button 聚焦时仅变化背景色或边框。</li>
</ul>
<h2 id="优势在于是由经验丰富的技术大佬主导的开源项目">优势在于是由经验丰富的技术大佬主导的开源项目</h2>
<p>说吧，为啥用你这组件库。</p>
<p>所有组件由 jay 开发，这意味着：</p>
<ul>
<li>所有组件均遵循规范。</li>
<li>统一的 API 设计。</li>
<li>统一的样式设计。</li>
<li>性能的把控。</li>
<li>极简的大小，npm 包 <strong>未压缩</strong> 不超过 1MB！</li>
</ul>
<h2 id="网址">网址</h2>
<ul>
<li>GitHub - 欢迎大家点亮Star🌟</li>
<li>React DevUI 官网</li>
<li>React DevUI Admin 官网</li>
</ul>
<p>--- END ---</p>
<p>我是 Kagol，如果你喜欢我的文章，可以给我点个赞，关注我的掘金账号和公众号 <code>Kagol</code>，一起交流前端技术、一起做开源！</p><br><br>
来源：https://www.cnblogs.com/kagol/p/16964838.html
頁:
[1]