介紹

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

支持平臺(tái)

評(píng)測(cè)背景

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

Table表格-評(píng)測(cè)

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

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

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

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

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

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

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

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

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

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

應(yīng)用代碼

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

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

Form表格-評(píng)測(cè)

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

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

而這一塊，我覺得Rsuite做的是不錯(cuò)的。比較簡(jiǎn)單明確了，個(gè)人覺得。而我想要評(píng)測(cè)的是校驗(yàn)這一塊，我喜歡Rsuite校驗(yàn)。

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

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

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

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

總結(jié)

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

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

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

總結(jié)

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

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