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

　　介绍

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

　　

　　Github地址

　　github/sheinsight/shineout

　　

　　安装和使用

　　npm install shineout

　　import { Table } from 'shineout'

　　在相关文档中，有对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，前端的发展总是一直在更新迭代，学习总是不会错的！