介紹

React Suite 是一套 React 組件庫，為后臺產(chǎn)品而生。同時也是一個具有貼心設(shè)計(jì)以及對開發(fā)者友好的 UI 框架。，它由 HYPERS 前端團(tuán)隊(duì)與 UX 團(tuán)隊(duì)共同打造，在經(jīng)歷了幾次大版本更新后，積累了大量的通用組件和功能，而且支持 Typescript 與 Flow, 支持服務(wù)端渲染。

支持平臺

評測背景

Rsuite我們已經(jīng)應(yīng)用到實(shí)際的項(xiàng)目中，并且控件實(shí)際應(yīng)用后，然后做的此評測。本文將從應(yīng)用性方面做出評測，以及在我們實(shí)際項(xiàng)目中我們具體的一些心得，我們不予其他配件進(jìn)行對比，我個人認(rèn)為沒有什么好對比的，各有各的優(yōu)勢而已。這個世界上哪有什么完美無瑕的。今天取兩塊進(jìn)行評論一個是Table和Form表單

Table表格-評測

在我們的后臺類管理項(xiàng)目中表格的應(yīng)用占據(jù)很大篇幅。針對后臺類的UI框架，我首先看的就是表格控件。

項(xiàng)目實(shí)例

這是一個項(xiàng)目中，完全基于Rsuite制作的電商類的SKU創(chuàng)建控件。目前美中不足的一個點(diǎn)就是表格上下單元格的合并目前無法支撐。

表格控件可以評測的內(nèi)容有很多，性能、功能、樣式等等。我今天主要一個評論點(diǎn)就是自定義單元格的。(以下代碼僅供參考)

這個標(biāo)準(zhǔn)的創(chuàng)建表的代碼。

兩個標(biāo)簽是可以進(jìn)行自定義，上圖動畫單元格就是將自定義化。

剛開始我有點(diǎn)不太喜歡，這種組件化的創(chuàng)建表格，看著有點(diǎn)不舒服。類似如下

后來進(jìn)行優(yōu)化后，其實(shí)也是可以很舒服的。

通過發(fā)現(xiàn)其實(shí)Rsuite表格上的支持的功能以及應(yīng)用方式，相對的也是比較綜合不同水平的開發(fā)者。通過對數(shù)據(jù)的控制就可以完成對列或行完美控制了。不過有一點(diǎn)感覺還是相對來說Rsuite在應(yīng)用上面需要開發(fā)者自身的開發(fā)基礎(chǔ)要求有點(diǎn)高，入門也可以說簡單，但是寫好代碼寫出一個相對客觀性強(qiáng)的代碼有點(diǎn)難度。

通過改進(jìn)寫法，表格在自定義控件上面，我就非常喜歡這種組件化的方式。

應(yīng)用代碼

具體實(shí)現(xiàn)代碼

通過對組件的進(jìn)一步可以實(shí)現(xiàn)比較強(qiáng)大的復(fù)用性以及明確的屬性事件。于此同時我可以根據(jù)數(shù)據(jù)不同顯示或渲染出不同的組件予以對應(yīng)。這點(diǎn)我個人是比較推薦的。

Form表格-評測

表單也是我們的后臺類管理項(xiàng)目中應(yīng)用篇幅很多的一塊。

簡單的示列，我評測這一塊最大的內(nèi)容點(diǎn)是表單的驗(yàn)證以及表單數(shù)據(jù)的控制。如果不能方便獲取或者修改控件的值和校驗(yàn)控件值，我覺得就是最大的失敗。

而這一塊，我覺得Rsuite做的是不錯的。比較簡單明確了，個人覺得。而我想要評測的是校驗(yàn)這一塊，我喜歡Rsuite校驗(yàn)。

首先定義一個校驗(yàn)?zāi)Ｐ?/p>

在From直接應(yīng)用Model即可

定義的Model也可以直接單獨(dú)使用

相對來說我認(rèn)為簡化復(fù)用性上面是有比較好的。

總結(jié)

框架本身還是比較新的。與其他框架比較起來。各有各的特色。

我們應(yīng)用此框架的本身原因也是尋求多元化。我們公司的主要用的React，對于UI框架本身也不是說一定要在每一個框架上面就限制死了。但是也不是滿目就引入。我通常一個項(xiàng)目只會用一個主要的框架。不會一個項(xiàng)目很多的UI框架，主要是不想弄的過于雜亂一會Button使用是這個框架的一會是另外一個的，為頁面遷移都造成許多的困難，最后奉上連接地址。

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

總結(jié)

以上是生活随笔為你收集整理的react把表格渲染好ui_《RSUITE》React企业级UI框架实战评测的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。