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定义。