導(dǎo)語：
其實(shí)demo早在四五月份就已經(jīng)寫好了，只是那段時間后臺項(xiàng)目太忙，加上自己拖延癥晚期，到最近才寫這篇文章。文章結(jié)構(gòu)大概從介紹本文使用的前端技術(shù)，使用的原因出發(fā)，同時結(jié)合代碼進(jìn)行使用講解，最后在配上如何基于本文demo進(jìn)行進(jìn)一步開發(fā)，盡量做到淺顯易懂，延續(xù)系列的特點(diǎn)。這篇文章應(yīng)該是我近期內(nèi)寫的最后一篇前端文章。寫完這篇文章，也算是從React系前端勉強(qiáng)畢業(yè)了，同時也是給自己這一年來前端學(xué)習(xí)的一個交代。文章有點(diǎn)長，大家慢慢看。也可以直接到最底下獲取我的github地址，直接下載demo跑起來，只需要一個npm start，童嫂無欺。
React
框架概念介紹
所使用的相關(guān)前端技術(shù)框架：React+React-Router+Redux+webpack2.0，ui框架用的是Ant Design。異步請求用的是fetch api。
1.React：這個就不用介紹了吧，這個還用介紹，估計(jì)這篇文章不太適合你。這個不熟的建議先學(xué)習(xí)一下，可以從我之前寫的后臺小白前端入門－－React看起。
2.Reac-Router：使用React-Router，可以讓你輕松使用React進(jìn)行多頁面開發(fā)。React—Router是React官方的貌似也是唯一的React路由解決方案。簡單來說，就是url改變，但是不經(jīng)過后臺，在前端進(jìn)行路由，根據(jù)url的不同選擇并渲染不同的路由組件。React-Router其實(shí)沒有多少東西，就一個路由容器，還有一些api，現(xiàn)在也出中文文檔了，可以跟著官方文檔的demo敲一遍就好了。
3.Redux：個人認(rèn)為這是技術(shù)棧里面比較難學(xué)的一個。不僅你要學(xué)習(xí)Redux是什么，也要學(xué)習(xí)如何和React搭配使用。簡而言之，Redux就是在瀏覽器內(nèi)存中弄了一個容器，用于存放及管理js狀態(tài)的地方。然后通過一系列的規(guī)范和限制，讓你能清晰地管理這些狀態(tài)，同時用這些狀態(tài)去改變頁面。
使用React做過復(fù)雜頁面的人可能會深有體會，當(dāng)一個嵌套了三四層的組件，最底層的子組件想要改變父組件的狀態(tài)，使得父組件通過這個狀態(tài)去改變另外一個最底層的子組件的時候，不使用消息訂閱方式的時候，無非就是寫一個回調(diào)一直傳到子組件供其調(diào)用，來改變這個父組件的狀態(tài)（其實(shí)就是父組件的state），然后父組件又把這個狀態(tài)一層層傳到另外一個子組件，然后另外一個子組件通過props值獲取到狀態(tài)的改變，來渲染頁面。這種代碼寫起來非常地惡心，一多起來，基本沒辦法閱讀和維護(hù)。
所以這個時候，你就需要在一個地方去統(tǒng)一管理這些狀態(tài)了，讓所有的組件都去這個地方獲取狀態(tài)的變化，或者改變狀態(tài)。這個就是Redux做的事情。React最初起步的時候，由官方推出的Flux也是做著類似的事情。不過后來Redux的出現(xiàn)，以更加清晰的store機(jī)制和使用方式，取代了Flux成為了主流。我自己也試著寫過Flux的代碼，寫起來Redux會更簡潔一些，所以這里就選擇使用Redux。
Redux學(xué)習(xí)的話，可以先從Redux中文文檔開始看起，大概了解一下Redux的相關(guān)機(jī)制。如果英文好一下的話，可以去看一個英文的Redux使用視頻，大概20多個，照著敲下來，應(yīng)該也差不多。當(dāng)然，本文后續(xù)也會介紹Redux結(jié)合React，React-Router使用。
4.框架作用小總結(jié)：為什么寫個React還要加著么多東西呢？簡單來說，就是你在最初使用React開發(fā)頁面的時候，你發(fā)現(xiàn)你的頁面只有一個url(單頁)，沒辦法做到通過url到達(dá)不同的頁面，然后你使用React-Router，就可以使用React進(jìn)行“多頁面”開發(fā)。然后你的網(wǎng)站越來越復(fù)雜了，抽出來的公共組件越來越多，頁面組件嵌套越來越深，狀態(tài)(父組件于子組件之間的state)之間的關(guān)系影響越來越復(fù)雜。這時候你就需要使用Redux來統(tǒng)一管理這些狀態(tài)了。
上面提到的相關(guān)資料站，都可以從本文最底下獲取到相關(guān)的鏈接，大家按需獲取。本demo的相關(guān)代碼放到了github里面，鏈接也放到底下了。
框架使用及說明
下面將介紹框架代碼的結(jié)構(gòu)和使用。先附上目錄結(jié)構(gòu)，介紹各個文件夾存放的文件及文件的結(jié)構(gòu)：
front
|---actions(使用Redux開發(fā)，對應(yīng)的action都放到這個目錄下，稍后詳解)
|---build(webpack打包編譯后生成的js文件，實(shí)際html引用的也是這里的文件)
|---common(一些公共的變量和api都放在這個文件夾下)
|---css
|---data(node服務(wù)器mock后臺數(shù)據(jù)的文件放在這)
|---jsx(組件代碼文件都放在這)
|---node_modules
|---reducers(使用Redux開發(fā)，對應(yīng)的action都放到這個目錄下，稍后詳解)
|---store(使用Redux開發(fā)，store文件存放路徑)
|---index.html(主頁面)
|---package.json(npm)
|---proxy.config.js(node服務(wù)器請求接口映射配置文件)
|---webpack.config.js
建議大家把demo下下來直接跑起來，先安裝好node和webpack，然后在front目錄下，使用npm install安裝以來，再使用webpack打包，最后使用npm start啟動node服務(wù)器，然后瀏覽器訪問http://localhost:8000/即可。demo比較簡單，只做了登陸頁，注冊頁和主頁。不過也夠用了。不知道node和webpack用法的可以先在我的上一篇博客搭個簡單例子，你就會有所了解了。后臺小白前端入門－－React前端框架搭建Demo及介紹。
啟動后，你就能看到這樣的頁面：
點(diǎn)擊右上角的名字，退出，可以跳到登陸頁，登陸頁點(diǎn)注冊，可到注冊頁。
關(guān)鍵代碼詳解
1.jsx/index.jsx：
//省略引入第三方庫的代碼。
import store, {history} from '../store/store.jsx';
class RouterComponent extends React.Component {
render() {
return (
<Provider store={store}>
<Router history={history}>
<Route path={env.homePage} component={ContainerComponent}>
<IndexRoute component={MainComponent}/>
<Route path={env.login } component={LoginComponent}/>
<Route path={env.register } component={RegisterComponent}/>
</Route>
</Router>
</Provider>
);
}
}
前面說到，我們已經(jīng)將state交給了Redux進(jìn)行管理，放在了store里面。那么如何在負(fù)責(zé)渲染頁面的組件里面獲取到這些state呢？在React-Redux中，提供了Provider組件，把它作為根組件，同時把store作為參數(shù)傳給它，你就能在嵌套在它下面的組件中拿到state。
接下來就是Router組件了，Router組件使用起來和不用Redux一樣，這里就不用詳細(xì)介紹。不過我們可以把history和store做個綁定，下面有詳細(xì)介紹。
2.store/store.jsx：
//省略引入第三方庫的代碼。
import * as reducers from '../reducers/rootreducer.jsx';
const rootReducer = combineReducers({
...reducers,
routing: RouterReducer
});
const store = createStore(rootReducer, applyMiddleware(thunk));
export const history = syncHistoryWithStore(browserHistory, store);
export default store;
上面的combineReducers，用于將多個負(fù)責(zé)改變不同的state的reducer合并成同一個reducer函數(shù)。這樣你就可以分別根據(jù)業(yè)務(wù)情況編寫不同的reducer了，代碼結(jié)構(gòu)清晰。
接著是syncHistoryWithStore，用于將History中的變化反映到store里的state中。這里我自己也不是很清楚，demo里面應(yīng)該是沒有用到對應(yīng)的例子，因?yàn)槲野堰@個代碼換成export const history = browserHistory; 編譯運(yùn)行都正常，有興趣的話可以做個深入研究。
3.jsx/component/MainComponent.jsx：
接下來，寫完上面那兩個配置文件。React+React-Router+Redux的框架就簡單的搭建起來了。現(xiàn)在開始寫一些比較簡單的頁面組件。下面主頁的代碼比較簡單，相信大家看懂應(yīng)該不費(fèi)吹灰之力。如果我們沒有用到Redux，其實(shí)就是把下面的loadData改成異步請求，同創(chuàng)建組件的相關(guān)state，把請求回來的參數(shù)傳給這個內(nèi)部的state，通過state組件的更新來更新頁面。代碼如下：
//以上略去了使用Redux需要聲明和綁定和函數(shù)，后面會給出。
export default class MainComponent extends React.Component {
constructor(props) {
super(props);
}
loadData() {
//這里是Redux的寫法，如果是不使用Redux，則直接寫異步請求并且將返回的數(shù)據(jù)setState到本組件的state中。
const {actions} = this.props;
actions.fetchArticleList();
}
componentDidMount() {
this.loadData();
}
render() {
var articleListHtml = [];
//這里是Redux的寫法，如果是不使用Redux,則直接從this.state中獲得數(shù)據(jù)。
const {articleList} = this.props;
if (common.isNotEmpty(articleList) && articleList.length > 0) {
for (var i = 0; i < articleList.length; i++) {
articleListHtml.push(
<tr key={i}>
<td className="td-align-center" style={{width:"50%"}}>
<a href="" target="_blank">{articleList[i].title}</a>
</td>
<td className="td-align-center" style={{width:"25%"}}>{articleList[i].creator}</td>
<td className="td-align-center"
style={{width:"25%"}}>{articleList[i].commentNum}/{articleList[i].readedNum}</td>
</tr>
)
}
}
return (
<div>
<Row type="flex" justify="center">
<h1>博文列表</h1>
</Row>
<Row type="flex" className="add-code-lib-row standard-margin-top">
<Col span={24}>
<div className="code-manage-main">
<table>
<thead>
<tr>
<th className="td-align-center">標(biāo)題</th>
<th className="td-align-center">作者</th>
<th className="td-align-center">回復(fù)/查看</th>
</tr>
</thead>
<tbody>
{articleListHtml}
</tbody>
</table>
</div>
</Col>
</Row>
</div>
);
}
}
--.Redux怎么用，用的時候該注意些什么：
寫完UI組件，這里有必要花一些篇幅簡單介紹一下Redux的一些機(jī)制和原則，以便于實(shí)在不想看Redux是什么以及怎么用的讀者理解接下來的代碼。
前面有說到，Redux就是用來管理狀態(tài)(state)的，不過它自己有一套自己的管理機(jī)制和規(guī)范，大概的示意圖如下：
（1）UI組件通過connet，綁定action和state（即圖中的1和2），使得組件可以dispatch action，同時也能在props里面獲取到store里對應(yīng)的state。
（2）組件生成action，并且進(jìn)行dispatch（即圖中的3），這里主要為了調(diào)用異步請求，獲取服務(wù)端數(shù)據(jù)。
（3）請求成功或者失敗后，會再在3的Action里，dispatch一個Action（圖中的4），這個action，才是用來通知reducer，讓其去改變store中對應(yīng)的狀態(tài)的。
（4）所有的Reducer都會收到該請求（圖中的5），如果符合條件的reducer會更改store中的state，并且返回新的state到store中，如果不符合，則直接返回舊的state，不做任何更改。
上面大概就是使用Redux的大致開發(fā)流程及數(shù)據(jù)流向了。同時Redux規(guī)定了3條原則，來保證store中狀態(tài)改變和使用足夠清晰。1.只有一個store，所有的狀態(tài)都存在于這個store中。2.通過action來觸發(fā)store中狀態(tài)的改變，reducer執(zhí)行具體的state變化。其它任何時間任何方式的state是只讀的。3.reducer函數(shù)必須是一個純函數(shù)，即對應(yīng)于任何兩個相同的輸入，只會有一種相同的輸出。舉個例子，你在這個純函數(shù)里面，Redux是不允許你使用諸如Math.random()或者new Date()等函數(shù)來改變state的。這樣做是為了保證狀態(tài)變化的可預(yù)測性和清晰性。
通過上面一系列原理和原則，Redux讓前端開發(fā)者和維護(hù)者對前端的代碼和邏輯更佳清楚易懂，對于狀態(tài)變化清晰可預(yù)測。
4.reducers/articleList.jsx：
import * as constants from '../common/constants.jsx'
const initialState = {};
export default function (state = initialState, action) {
switch (action.type) {
case constants.RECEIVE_ARTICLELIST:
const {articleList} = action;
return {
...state,
articleList
};
break;
default:
return state
}
}
//同時在common/constants.jsx中添加如下內(nèi)容，因?yàn)閍ction和reducer都會用到，所以放倒一個公共變量里面比較好。編程習(xí)慣編程習(xí)慣
export const RECEIVE_ARTICLELIST = 'RECEIVE_ARTICLELIST';
//在reducers/rootreducer.jsx中添加如下代碼，使得上面寫的reducer能綁定到store中。
export articleList from './articleList.jsx'
Redux部分的代碼講解將按照Redux流程從后到前講解，即從reducer，action，再到前端UI component 的順序，方便大家更加清楚地了解如何進(jìn)行Redux開發(fā)。
上面部分的代碼就是寫一個負(fù)責(zé)改變文章列表狀態(tài)的reducer，當(dāng)有一個type為'RECEIVE_ARTICLELIST'的action被分派的時候，這個reducer會進(jìn)行響應(yīng)，同時修改狀態(tài)里的articleList，重新計(jì)算并返回新的state到store中。需要說明的是，當(dāng)一個action被分派的時候，所有綁定的reducer都會被觸發(fā)執(zhí)行。如果符合則更新狀態(tài)，如果沒有則直接返回原state(即default：return state)，store里的狀態(tài)就不會變化。
我們寫完了這個reducer，就要把它綁定到store中，前面我們已經(jīng)通過如下代碼進(jìn)行配置了，所以只需要在reducers/rootreducer.jsx 添加即可綁定到store中。
import * as reducers from '../reducers/rootreducer.jsx';
const rootReducer = combineReducers({
...reducers,
routing: RouterReducer
});
const store = createStore(rootReducer, applyMiddleware(thunk));
5.actions/receiveArticleList.jsx：
接著往前寫，寫到Action,這里分派到Reducer的Action，是一個對象，其中有一個type屬性，是必須的，用來和reducer里面接受參數(shù)里面的action.type是一致的，也就是constants.jsx中的RECEIVE_ARTICLELIST = 'RECEIVE_ARTICLELIST'。另外你可以在這個對象里面添加一些其它的參數(shù)，以便于reducer匹配到以后拿這些參數(shù)去改變store中的狀態(tài)。如下代碼：
const constants = require('../common/constants.jsx');
export function receiveArticleList(articleList) {
return {
type: constants.RECEIVE_ARTICLELIST,
articleList
}
}
6.actions/fetchArticleList.jsx：
這里這個Action，其實(shí)在我看來，是一個偽“action”，因?yàn)樗]有分派到reducer中，而是觸發(fā)另外一個Action。這里這個Action是由UI組件分派的，為了進(jìn)行異步請求，在請求成功或者失敗后，再分派一個真正的Action，去改變store中的state。
在Redux中，把異步請求數(shù)據(jù)的代碼和邏輯放在Action里面是比較好的。當(dāng)然你可以直接在UI組件里面直接進(jìn)行異步請求，然后派發(fā)Action去改變store中的狀態(tài)。但是這么做的話，你的業(yè)務(wù)代碼和你的UI組件又耦合在一起了。代碼也不夠通用，感覺不太好。這部分的代碼如下：
import fetch from 'isomorphic-fetch'
require('es6-promise').polyfill();
import * as actions from './actions.jsx';
import env from '../common/env.js';
export function fetchArticleList() {
return (dispatch, getState) => {
fetch(env.getArticleList, {
credentials: 'same-origin',
headers: {
"Content-Type": "application/json"
}
// body: formData
}).then(function (response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
}).then(function (result) {
var code = result.code;
if (code == "0") {
//這里才是真正觸發(fā)Aciton的地方，去store的狀態(tài)。
dispatch(actions.receiveArticleList(result.data))
}
}.bind(this)).catch(function (error) {
alert("請求失敗，請檢查網(wǎng)絡(luò)");
//這里才是真正觸發(fā)Aciton的地方，去store的狀態(tài)。
dispatch(actions.receiveArticleList([]))
});
}
}
7.jsx/component/MainComponent.jsx：
最后，又回到了我們的UI組件。我們在前面已經(jīng)寫好了異步請求的Action，改變Store中狀態(tài)的Action，以及如何改變Store狀態(tài)的Reducer。
接下來，就是UI組件如何去獲取到store中的狀態(tài)，如何去直接或者間接（需要異步請求的時候）去派發(fā)一個Action，以及store中的state變化時，UI組件是如何過獲取到變化的。先貼上代碼，下面再進(jìn)行代碼說明。
import env from '../../common/env.js';
import common from '../../common/common.js';
import {fetchArticleList} from '../../actions/actions.jsx';
import {connect} from 'React-Redux';
const mapDispatchToProps = dispatch => {
return {
actions: {
fetchArticleList: () => dispatch(fetchArticleList())
}
}
};
// Map Redux state to component props
const mapStateToProps = createSelector(
state => state.articleList.articleList,
(articleList) => {
return {
articleList
}
}
);
@connect(mapStateToProps, mapDispatchToProps)
export default class MainComponent extends React.Component {
//這部分的代碼和 3.jsx/component/MainComponent.jsx中貼出的代碼一樣，不再給出。
}
接下里，我們一一解決上面的問題。
我們首先寫一個mapDispatchToProps函數(shù)，封裝一下需要派發(fā)的action，使得UI組件中的代碼能比較方便調(diào)用action。
其次，再寫一個mapStateToProps函數(shù)，返回想要訂閱的store的狀態(tài)（在本例子中，就是存儲在store中的articleList）。需要額外說明的是，這個state.articleList.articleList，
中間的articleList，是你在rootreducer.jsx中export的值。
最后使用React-Redux庫中的connet，將上面兩個函數(shù)綁定到UI組件上。這樣，UI組件就可以通過this.props中拿到store中的狀態(tài)值了，并且每一次store中的狀態(tài)值變化，也會觸發(fā)React組件中props的改變，觸發(fā)React生命周期的相關(guān)函數(shù)回調(diào)。同時，如果UI組件中想要觸發(fā)一次Action派發(fā)，也是在props里面進(jìn)行this.props.actions.fetchArticleList();即可。上面兩個函數(shù)已經(jīng)把a(bǔ)ction和store中的state都綁定到props對象里了。
至此，已經(jīng)把整個Demo的關(guān)鍵代碼進(jìn)行一一說明。詳細(xì)的代碼建議大家去我的github上下載下來看。這里就不提供全量代碼了。
基于demo代碼進(jìn)行相關(guān)開發(fā)步驟
上面代碼已經(jīng)詳細(xì)到，從零開始搭一套React大禮包了。但是如果你實(shí)在不想自己搭一套，去折騰什么依賴包問題，webpack問題，中間件問題，fetch請求兼容性問題等一大堆問題。想在本demo上直接開發(fā)，也是可以的。大概步驟如下：
1.寫好UI組件。
2.在index.jsx中配置好路由。
如果有異步請求，則還需要以下步驟：
3.在constants.jsx中設(shè)置action.type，供reducer和action使用。
4.在reducers文件夾中添加reducer。
5.在rootreducer。jsx中添加4中的文件
6.在actions文件夾中添加相關(guān)action，如果有ajax請求，建議分成fetch，receive兩個action
7.在actions。jsx中添加6中的文件
8.在對應(yīng)的組件中編寫對應(yīng)的邏輯。etc：@connect(mapStateToProps, mapDispatchToProps)等
總結(jié)
當(dāng)然，這個demo代碼比較簡單，只是為了用React大禮包而用React大禮包，太過于復(fù)雜的代碼也不適合進(jìn)行講解說明。而且，這套框架搭起來了，仍然有很多問題，很多規(guī)范需要去解決。比如什么時候把組件中的state放到store中，怎樣接著精簡代碼，去掉rootreducer.jsx、actions.jsx等等等等。都值得進(jìn)行深入的學(xué)習(xí)和研究，也歡迎大家這篇文章下面評論討論，提出解決方案。
想把這套框架吃下來，合理運(yùn)用起來，光是這些代碼和學(xué)習(xí)也是遠(yuǎn)遠(yuǎn)不夠的。還需要更多的學(xué)習(xí)和實(shí)踐，不過希望這篇文章提供一些信心，成為一個好的起點(diǎn)。
臨走之前，我還有話要說
其實(shí)在15年的時候就已經(jīng)開始寫前端代碼了，用的是jQuery。然后到去年，開始認(rèn)真研究React及其相關(guān)生態(tài)系統(tǒng)。感覺現(xiàn)在的前端，處于一個群雄割據(jù)的年代。老派的還在用jQuery，然后現(xiàn)在比較主流的三大框架React，Vue，Angular，都占有不小的使用比例。這對于前端學(xué)習(xí)者，我覺得已經(jīng)算是不小的負(fù)擔(dān)，并且這些技術(shù)還在飛速迭代著。當(dāng)然這也無可厚非，大家都想一統(tǒng)天下，但是，在這種急功近利的趨勢，導(dǎo)致很多時候，自己都沒統(tǒng)一自己。我在用webpack的時候，剛好經(jīng)歷webpack1過渡到webpack2，然后發(fā)現(xiàn)webpack2竟然不兼容webpack1，要做代碼升級及兼容。聽前端的同時說，Angular2和Angular1，差別也很大。這一系列的變動，也導(dǎo)致了對應(yīng)的插件和api庫跟著不兼容，需要升級。導(dǎo)致這個過程非常的痛苦。暫別前端，希望下次回來，前端有一番新氣象。
