react把表格渲染好ui_《RSUITE》React企业级UI框架实战评测

介绍

React Suite 是一套 React 组件库，为后台产品而生。同时也是一个具有贴心设计以及对开发者友好的 UI 框架。，它由 HYPERS 前端团队与 UX 团队共同打造，在经历了几次大版本更新后，积累了大量的通用组件和功能，而且支持 Typescript 与 Flow, 支持服务端渲染。

支持平台

评测背景

Rsuite我们已经应用到实际的项目中，并且控件实际应用后，然后做的此评测。本文将从应用性方面做出评测，以及在我们实际项目中我们具体的一些心得，我们不予其他配件进行对比，我个人认为没有什么好对比的，各有各的优势而已。这个世界上哪有什么完美无瑕的。今天取两块进行评论一个是Table和Form表单

Table表格-评测

在我们的后台类管理项目中表格的应用占据很大篇幅。针对后台类的UI框架，我首先看的就是表格控件。

项目实例

这是一个项目中，完全基于Rsuite制作的电商类的SKU创建控件。目前美中不足的一个点就是表格上下单元格的合并目前无法支撑。

表格控件可以评测的内容有很多，性能、功能、样式等等。我今天主要一个评论点就是自定义单元格的。(以下代码仅供参考)

这个标准的创建表的代码。

两个标签是可以进行自定义，上图动画单元格就是将自定义化。

刚开始我有点不太喜欢，这种组件化的创建表格，看着有点不舒服。类似如下

后来进行优化后，其实也是可以很舒服的。

通过发现其实Rsuite表格上的支持的功能以及应用方式，相对的也是比较综合不同水平的开发者。通过对数据的控制就可以完成对列或行完美控制了。不过有一点感觉还是相对来说Rsuite在应用上面需要开发者自身的开发基础要求有点高，入门也可以说简单，但是写好代码写出一个相对客观性强的代码有点难度。

通过改进写法，表格在自定义控件上面，我就非常喜欢这种组件化的方式。

应用代码

具体实现代码

通过对组件的进一步可以实现比较强大的复用性以及明确的属性事件。于此同时我可以根据数据不同显示或渲染出不同的组件予以对应。这点我个人是比较推荐的。

Form表格-评测

表单也是我们的后台类管理项目中应用篇幅很多的一块。

简单的示列，我评测这一块最大的内容点是表单的验证以及表单数据的控制。如果不能方便获取或者修改控件的值和校验控件值，我觉得就是最大的失败。

而这一块，我觉得Rsuite做的是不错的。比较简单明确了，个人觉得。而我想要评测的是校验这一块，我喜欢Rsuite校验。

首先定义一个校验模型

在From直接应用Model即可

定义的Model也可以直接单独使用

相对来说我认为简化复用性上面是有比较好的。

总结

框架本身还是比较新的。与其他框架比较起来。各有各的特色。

我们应用此框架的本身原因也是寻求多元化。我们公司的主要用的React，对于UI框架本身也不是说一定要在每一个框架上面就限制死了。但是也不是满目就引入。我通常一个项目只会用一个主要的框架。不会一个项目很多的UI框架，主要是不想弄的过于杂乱一会Button使用是这个框架的一会是另外一个的，为页面迁移都造成许多的困难，最后奉上连接地址。

rsuite : https://github.com/rsuite/rsuite