Semantic-UI的React實現（一）：架構介紹

React組件化的UI庫

目前React組件化的UI有不少，這裏有不少已實現的React組件庫。如：

• TouchstoneJS - React.js powered UI framework for developing beautiful
  hybrid 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不在這個列表中。雖然官方目前也在作相關的工做（戳這裏），但目前尚未出穩定版本。我的以爲這正是一個練習的機會，將Semantic-UI庫React組件化。

Semantic-UI

Semantic-UI是一套徹底語義化設計的前端框架，使用起來靈活又方便，能夠知足多變複雜的頁面實現需求。從官方文檔（版本2.2）來看，主要有四類框架元素：

1. 元素

2. 組合

3. 視圖

4. 模塊

具體示例可參考官網。

基本分析

Semantic-UI實現於語義化設計，各個類能夠自由組合使用已實現頁面需求。每一個組件的屬性定義大多相似，如Button和Icon，都有size或者color等經常使用屬性，而這些屬性可用公共輔助類來定義和聲明。

從實現上來說，元素、組合和視圖的大部分實現，均可以用純CSS聲明來達到效果，但模塊類的組件每每須要js的輔助以實現動態效果。考慮到這一點，組件實現大體分爲兩類實現：UI類和動效類。須要實現3DTransition的組件都繼承於動效類，剩餘只需CSS聲明的組件繼承於UI類。固然動效類也一樣繼承於UI類。

UiElement

UiElement做爲全部基礎UI組件的基類，主要負責如下幾類實現：

1. 元素class的生成

2. 元素事件回調的生成

基於Semantic-UI的語義化實現，全部class類均由多個屬性拼裝組成，因此每一個UI組件的屬性在組件內聲明便可，class類的生成由父類UiElement負責。

AmElement

AmElement做爲動效組件的父類，主要負責如下功能實現：

1. 組件的show/hide接口調用

2. 直接操做組件DOM，生成transition的style

每一個動效組件繼承AmElement後，均將本組件的ref引用傳遞給父組件，由父組件統一調用並修改子組件的DOM元素style屬性，以實現3DTransition效果。

PropsHelper

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

1. createStyle：用以生成組件class定義

2. getDefaultProps：取得全部組件的通用props

每一個組件在生成class定義是，只需提供本組件的props以及屬性定義，便可生成對應的class定義。