介绍

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

Github地址

https://github.com/sheinsight/shineout

安装和使用

 npm install shineout

import { Table } from 'shineout'
<Table />

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

组件预览

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

• 按钮组件

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

• 级联组件

• 日期选择框

• 表单组件

• Slider滑块

• TreeSelect树形选择框

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

• 上传组件

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

• 轮播组件

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

• 表格组件

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

• 树形选择

• 消息提示框

• 模态对话框

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

• Loading加载组件

• Tab标签页

• 菜单

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

浏览器兼容性

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

总结

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