介绍

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

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

react把表格渲染好ui_在React中实现条件渲染的7种方法
借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染. 条件渲染一词描述了根据某些条件渲染不同UI标签的能力.在react文档中,这是一种根据条件渲染不 ...
react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
从一个表格render方法问题看React函数组件的更新
从一个表格render方法问题看React函数组件的更新最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下,从这个现象我们能很清楚的看到函数组件的更新的特点,以及我们应该如何去理解和 ...
react将表格动态生成视频列表【代码】【案例】
只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html><hea ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
React服务端渲染实现（基于Dva)
React服务端渲染实现 (基于Dva) 功能基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再 ...
我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...
React的列表渲染
//9. 列表渲染class List extends React.Component{state = {list:[1,2,3,4,5],list2:[{id:1,text:'java'},{id: ...

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

介绍

支持平台

评测背景

Table表格-评测

Form表格-评测

总结

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

最新文章

热门文章