更加「轻量」和「快速」的基于React的组件库——SHINEOUT

发布网友发布时间：2023-07-08 23:58

共1个回答

热心网友时间：2024-10-22 05:15

依据文档介绍，SHINEOUT是一个更加轻量、更加快速的React组件库，在日常的中后端系统中，表格往往扮演着加载展示数据的角色，但同时，当数据量大的时候，可能会遇到性能瓶颈，界面往往会卡顿，一般情况下我们可以使用虚拟加载技术，在之前文章中也介绍过，但有时候可能会有一定的局限性。而SHINEOUT可能会给你提供一个更加优秀的解决方案，提供简单实用的表格组件，性能优秀自适应等。

在相关文档中，有对shineout的一系列介绍，包括webpack配置、主体、css模块、结合creat-react-app、babel的配置以及国际化I18N等

通过截图的方式对其组件进行一个简单的预览，通常一个组件库所包含的就是我们日常所使用的组件，SHINEOUT也不例外：

Button 内置了几种常用的类型，分为默认(default), 主要(primary), 次要(secondary), 成功(success), 警告(warning), 危险(danger)和链接(link)

TreeSelect 用来选择树形数据结构，若需要非关联树形结构选择可使用 Select(treeData)

支持上传图片、上传校验、大小*、异常处理、恢复删除、拖拽上传等功能

轮播组件内置三种效果，同时提供自定义的方式

SHINEOUT比较优秀的地方就在于它在性能上的优势，Table内部对大量数据的渲染做了lazy render的优化。这个例子加载了10000条，55列数据。可以通过设置rowsInView调整单次最多render的行数，默认为20

它的模态框还是比较人性化的，不仅仅是弹出框，同时还支持上下左右的滑出，支持多层等

以上是对其部分组件进行一个简单的预览，已经有些兴趣的小伙伴可以到Github上进行查看，效果更佳!

浏览器兼容性最低兼容到IE10，支持所有的主流浏览器，如下：

用惯了大厂如阿里的Ant Design又或是MATERIAL-UI等，有时候不妨尝试一番小众产物，或许在众多花草中找到一个灵感，不管是React还是Vue，前端的发展总是一直在更新迭代，学习总是不会错的！