介紹

React Suite 是一套 React 組件庫，為後臺產品而生。同時也是一個具有貼心設計以及對開發者友好的 UI 框架。，它由 HYPERS 前端團隊與 UX 團隊共同打造，在經歷了幾次大版本更新後，積累了大量的通用組件和功能，而且支持 Typescript 與 Flow, 支持服務端渲染。

支持平臺

評測背景

Rsuite我們已經應用到實際的項目中，並且控件實際應用後，然後做的此評測。本文將從應用性方面做出評測，以及在我們實際項目中我們具體的一些心得，我們不予其他配件進行對比，我個人認為沒有什麼好對比的，各有各的優勢而已。這個世界上哪有什麼完美無瑕的。今天取兩塊進行評論一個是Table和Form表單

Table表格-評測

在我們的後臺類管理項目中表格的應用佔據很大篇幅。針對後臺類的UI框架，我首先看的就是表格控件。

項目實例

這是一個項目中，完全基於Rsuite製作的電商類的SKU創建控件。目前美中不足的一個點就是表格上下單元格的合併目前無法支撐。

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

<table> virtualized
height={400}
data={fakeLargeData}
onRowClick={data => {
console.log(data);
}}
>
<column>
<headercell>Id/<headercell>
<cell>
/<column>
/<table>

這個標準的創建表的代碼。

<cell>

兩個標籤是可以進行自定義，上圖動畫單元格就是將<cell>自定義化。

剛開始我有點不太喜歡，這種組件化的創建表格，看著有點不舒服。類似如下

後來進行優化後，其實也是可以很舒服的。

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

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

應用代碼

具體實現代碼

通過對組件的進一步可以實現比較強大的複用性以及明確的屬性事件。於此同時我可以根據數據不同顯示或渲染出不同的組件予以對應。這點我個人是比較推薦的。

Form表格-評測

表單也是我們的後臺類管理項目中應用篇幅很多的一塊。

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

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

首先定義一個校驗模型

在From直接應用Model即可

定義的Model也可以直接單獨使用

相對來說我認為簡化複用性上面是有比較好的。

總結

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

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

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

分享到:

閱讀更多 程序產品人 的文章

關鍵字: 評測實戰設計