在前面我們通過四篇文章入門了React的大部分主要API，現在則開始進入實踐環節。
實踐系列的開篇打算拿我司的FrozenUI來試驗，將其部分UI組件進行React化，作為第一篇實踐文章，將以較簡單的Loading組件來入手，官網demo的效果如下圖：
為了更好地開發，后續將以webpack工具來輔助，對其不了解的童鞋可以先查閱我的《webpack 入門指南》一文。
鑒于我們將復用 FrozenUI 的樣式，所以在DOM結構、class命名上都應當盡量和原版的保持一致，在這個基礎上來實現具有同樣功能的React組件。
于是我們先下載好 frozen.css（方便示例所以直接用全局的樣式）和圖片資源，并定義一個簡單的 webpack.config.js：
module.exports = { entry: { loading : './src/js/page/loading.js' }, output: { path: 'dist/js/page', filename: '[name].js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, resolve: { extensions: ['', '.js', '.json', '.scss'] } };
需要下載的模塊大致有這些（盡管有幾個我們暫時還用不上，先裝上無所謂）：
"dependencies": { "css-loader": "^0.15.2", "expose-loader": "^0.7.0", "file-loader": "^0.8.4", "jsx-loader": "^0.13.2", "node-sass": "^3.2.0", "react": "^0.13.3", "sass-loader": "^1.0.2", "style-loader": "^0.12.3", "url-loader": "^0.5.6" }
我們的文件目錄結構也很簡單：
其中 src 為源文件文件夾，dist 用于存放 webpack 最終處理后的輸出文件。
src/js 中又分了 component 和 page 兩個文件夾，用于存放組件腳本和html頁面上要引用的入口腳本。
./loading.html
這是最終執行頁面，作為Demo可以做的簡單點：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Demo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <div class="wrap"></div> <script src="dist/js/page/loading.js"></script> </body> </html>
其中類名為wrap的div是方便我們掛載Loading組件的容器，整個頁面也只有一個script腳本入口（樣式也將最終打包在里面）。
./src/js/page/loading.js
我們先寫好該頁面入口腳本，確定好Loading組件的使用錐形：
require('../../css/frozen.css'); //把樣式引進來 var React = require('react'), Loading = require('../component/Loading'); //這是組件模塊，下一步要寫的東西 var wrap = document.querySelector('.wrap'), hideCallback = function(){ //卸載組件后的回調 alert('done!!'); }; React.render( <Loading content='哈嘍' onHide={hideCallback}/>, wrap ); setTimeout(function(){ //3秒后卸載組件，模擬觸發回調 React.unmountComponentAtNode(wrap) }, 3000);
我們希望能夠自定義Loading組件上所顯示的文字，以及它被隱藏掉時觸發的回調，故我們使用兩個props——“content”和“onHide”來綁定（事實上還有一個判斷是否只在局部顯示“加載中”的props屬性“isPart”，但新版的FrozenUI取消了該功能）。
./src/js/component/Loading.js
這塊是Loading組件模塊，是最重要的模塊，用于實現Loading組件的全部功能。
注意常規我們要求React組件模塊的首字母必須大寫。
初步寫出一個簡單的組件結構：
var React = require('react'), PropTypes = React.PropTypes; var Loading = React.createClass({ propTypes: { onHide: PropTypes.func, //組件卸載后的回調 content: PropTypes.string // 展示內容 }, componentWillUnmount: function(){ //卸載時的回調 if(typeof this.props.onHide === 'function'){ setTimeout(this.props.onHide, 10); } }, render: function () { var content = this.props.content || '正在加載中...', component = (<div>{content}</div>); return component } }); module.exports = Loading;
對于兩個綁定的props，我們分別在 componentWillUnmount 和 render 中做了對應處理，從而決定了組件卸載時是否觸發回調，以及加載時顯示什么內容（若未傳props.content，則默認為“正在加載中...”），接著我們要處理的是最終渲染的DOM結構（總不能只有一個div對吧），這塊我們得分析現有的 Frozen-Loading組件的DOM結構，盡量與其一致（包括類名的定義）：
那么我們只需要在 render 里直接套用這塊DOM結構，把<p>標簽里的內容換成 {content} 即可。
不過這樣好像太簡單了，不怎么好玩呢~
在上個版本的Frozen-Loading組件里，是有區分全局展示/局部展示加載界面的，局部加載是醬紫的：
我還記得局部展示情況下的DOM結構和樣式（實際上它們只是類名不同），于是打算增加個 props.isPart 來判斷用戶是否要局部展示，并且這樣改寫組件代碼：
var React = require('react'), loadingCN = require('../component/styleMaps').loadingCN, //引入加載組件類名對象 PropTypes = React.PropTypes; var Loading = React.createClass({ propTypes: { isPart: PropTypes.bool, //是否局部加載 onHide: PropTypes.func, //組件卸載后的回調 content: PropTypes.string // 展示內容 }, componentWillUnmount: function(){ if(typeof this.props.onHide === 'function'){ setTimeout(this.props.onHide, 10); } }, render: function () { var content = this.props.content || '正在加載中...', flag = this.props.isPart ? 'partial' : 'global', component = (<div className={loadingCN.block[flag]}> <div className={loadingCN.wrap[flag]}> <i className={loadingCN.i[flag]}></i> <p>{content}</p> </div> </div>); return component } }); module.exports = Loading;
留意一個比較有趣的地方，我們通關一個變量flag來判斷用戶是希望全局顯示還是局部顯示加載界面，然后通過這個標簽來獲取到對應的類名：
flag = this.props.isPart ? 'partial' : 'global', component = (<div className={loadingCN.block[flag]}> <div className={loadingCN.wrap[flag]}> <i className={loadingCN.i[flag]}></i> <p>{content}</p> </div> </div>);
而此處的 loadingCN 是我們在開頭引入的一個共用模塊：
loadingCN = require('../component/styleMaps').loadingCN
該模塊的定義也非常簡單：
./src/js/component/styleMaps.js
module.exports = { globalCN: {}, loadingCN: { block: { partial: 'demo-block', global: 'ui-loading-block show' }, wrap: { partial: 'ui-loading-wrap', global: 'ui-loading-cnt' }, i: { partial: 'ui-loading', global: 'ui-loading-bright' } } };
其返回了一個存放各組件類名對象，因此我們可以通過 require('../component/styleMaps').loadingCN.block['global'] 的形式來獲取到Loading組件全局加載時最外層div的類名。
于是乎我們為啥要這么折騰多搞個樣式模塊呢？直接寫在 Loading.js 里不行么？
答案是可以，但是多出一個樣式模塊可以方便我們后期統一在一個文件里維護所有組件的類名，實際上是為后期維護提供了一定便捷度。
另外該樣式管理模塊我們也暫時騰出了一個叫 globalCN 的對象屬性，可以作為存放多個組件間共用的類名。
我們執行 webpack 打包后訪問根目錄的 loading.html（模擬移動端），效果正合我們預期呢：
我們給 page/loading.js 要渲染的組件加上 isPart={true} ，讓其走局部加載形式：
React.render( <Loading content='哈嘍' onHide={hideCallback} isPart={true}/>, wrap );
運行結果也是666：
本次的實踐就這么愉快的結束吧~ 本節的代碼可以在我的Github下載到。
下次分享下稍復雜點的 Tab 面板的React化的實現。共勉~！
如果覺得有幫助，就幫忙點下推薦吧，不然感覺每次寫這種系列的文章好吃虧都沒人支持。。。都不太想繼續寫了\("▔□▔)/
文章列表
留言列表
