React組件化的UI庫

目前React組件化的UI有很多，這里有很多已實(shí)現(xiàn)的React組件庫。如：

• TouchstoneJS - React.js powered UI framework for developing beautifulhybrid mobile apps.
• Elemental UI
• RSuite | 一個基于 React.js 的 Web 組件庫
• Ant Design of React - Ant Design
• Material-UI
• React-Bootstrap
• React + Foundation · Foundation as React components
• Essence - React Material Design Framework
• React-MDL: React Components for Material Design Lite
• Belle - Configurable React Components with great UX
• MUI - Material Design CSS Framework
• Grommet
• React Toolbox
• react-blazecss 0.4.3 Demo
• Pivotal UI: Intro
• BFD UI

但是我一直比較偏愛的Semantic-UI不在這個列表中。雖然官方目前也在做相關(guān)的工作(戳這里)，但目前還沒有出穩(wěn)定版本。個人覺得這正是一個練習(xí)的機(jī)會，將Semantic-UI庫React組件化。

Semantic-UI

Semantic-UI是一套完全語義化設(shè)計的前端框架，使用起來靈活又方便，可以滿足多變復(fù)雜的頁面實(shí)現(xiàn)需求。從官方文檔(版本2.2)來看，主要有四類框架元素：

1. 元素
2. 組合
3. 視圖
4. 模塊

具體示例可參考官網(wǎng)。

基本分析

Semantic-UI實(shí)現(xiàn)于語義化設(shè)計，各個類可以自由組合使用已實(shí)現(xiàn)頁面需求。每個組件的屬性定義大多類似，如Button和Icon，都有size或者color等常用屬性，而這些屬性可用公共輔助類來定義和聲明。

從實(shí)現(xiàn)上來講，元素、組合和視圖的大部分實(shí)現(xiàn)，都可以用純CSS聲明來達(dá)到效果，但模塊類的組件往往需要js的輔助以實(shí)現(xiàn)動態(tài)效果?？紤]到這一點(diǎn)，組件實(shí)現(xiàn)大致分為兩類實(shí)現(xiàn)：UI類和動效類。需要實(shí)現(xiàn)3DTransition的組件都繼承于動效類，剩余只需CSS聲明的組件繼承于UI類。當(dāng)然動效類也同樣繼承于UI類。

UiElement

UiElement作為所有基礎(chǔ)UI組件的基類，主要負(fù)責(zé)以下幾類實(shí)現(xiàn)：

1. 元素class的生成
2. 元素事件回調(diào)的生成

基于Semantic-UI的語義化實(shí)現(xiàn)，所有class類均由多個屬性拼裝組成，所以每個UI組件的屬性在組件內(nèi)聲明即可，class類的生成由父類UiElement負(fù)責(zé)。

AmElement

AmElement作為動效組件的父類，主要負(fù)責(zé)以下功能實(shí)現(xiàn)：

1. 組件的show/hide接口調(diào)用
2. 直接操作組件DOM，生成transition的style

每個動效組件繼承AmElement后，均將本組件的ref引用傳遞給父組件，由父組件統(tǒng)一調(diào)用并修改子組件的DOM元素style屬性，以實(shí)現(xiàn)3DTransition效果。

PropsHelper

組件Props的輔助類，用以生成組件的class。PropsHelper中有多個靜態(tài)方法：

1. createStyle：用以生成組件class定義
2. getDefaultProps：取得所有組件的通用props

每個組件在生成class定義是，只需提供本組件的props以及屬性定義，即可生成對應(yīng)的class定義。