建站
咨詢
售后
建站咨詢
新聞中心
React組件化的UI庫
目前React組件化的UI有很多，這里有很多已實現(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í)的機會，將Semantic-UI庫React組件化。
Semantic-UI
Semantic-UI是一套完全語義化設(shè)計的前端框架，使用起來靈活又方便，可以滿足多變復(fù)雜的頁面實現(xiàn)需求。從官方文檔(版本2.2)來看，主要有四類框架元素：
- 元素
- 組合
- 視圖
- 模塊
具體示例可參考官網(wǎng)。
基本分析
Semantic-UI實現(xiàn)于語義化設(shè)計，各個類可以自由組合使用已實現(xiàn)頁面需求。每個組件的屬性定義大多類似，如Button和Icon，都有size或者color等常用屬性，而這些屬性可用公共輔助類來定義和聲明。
從實現(xiàn)上來講，元素、組合和視圖的大部分實現(xiàn)，都可以用純CSS聲明來達到效果，但模塊類的組件往往需要js的輔助以實現(xiàn)動態(tài)效果?？紤]到這一點，組件實現(xiàn)大致分為兩類實現(xiàn)：UI類和動效類。需要實現(xiàn)3DTransition的組件都繼承于動效類，剩余只需CSS聲明的組件繼承于UI類。當(dāng)然動效類也同樣繼承于UI類。
UiElement
UiElement作為所有基礎(chǔ)UI組件的基類，主要負(fù)責(zé)以下幾類實現(xiàn)：
- 元素class的生成
- 元素事件回調(diào)的生成
基于Semantic-UI的語義化實現(xiàn)，所有class類均由多個屬性拼裝組成，所以每個UI組件的屬性在組件內(nèi)聲明即可，class類的生成由父類UiElement負(fù)責(zé)。
AmElement
AmElement作為動效組件的父類，主要負(fù)責(zé)以下功能實現(xiàn)：
- 組件的show/hide接口調(diào)用
- 直接操作組件DOM，生成transition的style
每個動效組件繼承AmElement后，均將本組件的ref引用傳遞給父組件，由父組件統(tǒng)一調(diào)用并修改子組件的DOM元素style屬性，以實現(xiàn)3DTransition效果。
PropsHelper
組件Props的輔助類，用以生成組件的class。PropsHelper中有多個靜態(tài)方法：
- createStyle：用以生成組件class定義
- getDefaultProps：取得所有組件的通用props
每個組件在生成class定義是，只需提供本組件的props以及屬性定義，即可生成對應(yīng)的class定義。
名稱欄目：Semantic-UI的React實現(xiàn)（一）：架構(gòu)介紹
轉(zhuǎn)載來于：http://www.5511xx.com/article/cdpchcc.html
