Flux用來(lái)解決React在結(jié)構(gòu)上的問(wèn)題,從Flux也衍生了Redux,Flux也類(lèi)似MVC這一類(lèi)的架構(gòu),Flux最大特點(diǎn)就是單向數(shù)據(jù)流動(dòng)
1.基本概念
這是Flux在GitHub上文檔中所提供的流程展示圖,里面有四個(gè)核心的東西
Action:動(dòng)作,視圖層發(fā)出的動(dòng)作,類(lèi)似事件
Dispatcher:派發(fā)器,接受Action,全局唯一,相當(dāng)于C
Store:存儲(chǔ)層,相當(dāng)于M,數(shù)據(jù)變化,會(huì)讓View層對(duì)應(yīng)修改,負(fù)責(zé)存儲(chǔ)和處理數(shù)據(jù)相關(guān)邏輯
View:視圖層,相當(dāng)于V
整個(gè)流程如下
1.從用戶操作頁(yè)面開(kāi)始,發(fā)出Action
2.Dispatcher接受Action,然后派發(fā)Action,找到對(duì)應(yīng)的Store
3.Store進(jìn)行更新,發(fā)出一個(gè)change事件
4.頁(yè)面接受change,更新界面
這就是一個(gè)完整單向的數(shù)據(jù)流動(dòng)過(guò)程,任何過(guò)程都不會(huì)發(fā)生雙向數(shù)據(jù)流動(dòng)
2.Action
整個(gè)過(guò)程從Action開(kāi)始,Action是一個(gè)JS對(duì)象,用來(lái)描述我們要干什么,需要什么樣的數(shù)據(jù),可以寫(xiě)一個(gè)Action.js文件,在這個(gè)文件里,對(duì)所有Action進(jìn)行匯總,Flux只要加一個(gè)新的功能,就要對(duì)應(yīng)加一個(gè)Action類(lèi)型,這就像MVC中如果要添加新的功能添加新的Controller一樣,在Flux里,就是添加新的Action.
export const addNum = (result) => {
AppDispatcher.dispatch({
actionName: "add",
counterCaption: result
});
};
定一個(gè)對(duì)外使用的函數(shù),這個(gè)函數(shù)目的就是點(diǎn)擊按鈕+1,通過(guò)頁(yè)面點(diǎn)擊事件發(fā)出的Action而,觸發(fā)事件的View,還是正常綁定事件,只是在對(duì)應(yīng)事件的具體實(shí)現(xiàn),需要找到Action里對(duì)應(yīng)的函數(shù),然后進(jìn)行調(diào)用
import * as Actions from '../Actions.js';
class Son extends Component {
onClickAddButton() {
Actions.addNum("add");
}
}
當(dāng)然我簡(jiǎn)化了整個(gè)過(guò)程,這樣就完成了事件的觸發(fā),接下來(lái)開(kāi)始執(zhí)行回調(diào)函數(shù)里面的內(nèi)容了,首先我們引入了AppDispatcher.js文件,它創(chuàng)造了一個(gè)唯一的Dispatcher對(duì)象,類(lèi)似于單例,通過(guò)它來(lái)發(fā)送和接管Action.
AppDispatcher.dispatch相當(dāng)于發(fā)送了一個(gè)消息,這個(gè)消息包含了需要發(fā)送的內(nèi)容,也就是需要傳的值,一般都會(huì)有actionName這樣的字段,標(biāo)明當(dāng)前Action代表了什么樣的操作,名隨便,然后其他字段可以對(duì)應(yīng)要傳的值.
3.Dispatcher
在代碼里,Dispatcher對(duì)應(yīng)的AppDispatcher.js不需要寫(xiě)什么,就返回一個(gè)默認(rèn)的Dispatcher對(duì)象
import {Dispatcher} from 'flux';
export default new Dispatcher();
Dispatcher提供的API也不是很多,一共5個(gè)方法
1.dispatch:用來(lái)發(fā)送消息,包含要傳的數(shù)據(jù),Action的參數(shù)
2.register(function callback):注冊(cè)一個(gè)接受消息的接收器,可以接受到dispatch發(fā)送的消息,Stores自己需求,完成對(duì)應(yīng)數(shù)據(jù)的操作
3.unregister:跟注冊(cè)相應(yīng)的方法,移除毀掉函數(shù)
4.isDispatching:boolean類(lèi)型的返回值,是否目前正在調(diào)用的dispatcher
5.waitFor(array<string> ids):有的時(shí)候在一個(gè)過(guò)程中注冊(cè)了幾個(gè)監(jiān)聽(tīng)器,但是就怕出現(xiàn)意外,因?yàn)轫樞蛏系幕靵y造成bug,所以為了避免這個(gè)問(wèn)題就可以使用waitFor來(lái)控制.這個(gè)方法需要一個(gè)數(shù)組,這個(gè)數(shù)組里的元素都是dispatchToken,也就是注冊(cè)的監(jiān)聽(tīng)器,會(huì)告訴Dispatcher當(dāng)前的處理必須暫停,直到這些已經(jīng)注冊(cè)的監(jiān)聽(tīng)都執(zhí)行結(jié)束才會(huì)繼續(xù),這樣就避免了因?yàn)轫樞蚨斐傻牟槐匾腻e(cuò)誤
注冊(cè)這部分代碼要寫(xiě)在Stores
import AppDispatcher from '../AppDispatcher.js';
CounterStore.dispatchToken = AppDispatcher.register((action) => {
if (action.actionName === "add") {
counterValues[action.counterCaption] ++;
} else if (action.actionName === "sub") {
counterValues[action.counterCaption] --;
}
});
CounterStore是一個(gè)計(jì)數(shù)器類(lèi),添加了dispatchToken用來(lái)保存注冊(cè)的監(jiān)聽(tīng)器,action用來(lái)接收發(fā)射器傳遞的數(shù)據(jù),根據(jù)對(duì)應(yīng)的action事件類(lèi)型進(jìn)行對(duì)應(yīng)的操作,而且這個(gè)文件如果被其他文件inport之后,可以通過(guò)CounterStore.dispatchToken找到對(duì)應(yīng)的監(jiān)聽(tīng)器,這樣就能用在waitFor這個(gè)方法里了
4.Store
Store用來(lái)存儲(chǔ)應(yīng)用對(duì)應(yīng)狀態(tài),根據(jù)接收dispatch對(duì)應(yīng)的狀態(tài),更改View的顯示狀態(tài),而監(jiān)聽(tīng)整個(gè)變化的過(guò)程就需要使用EventEmitter來(lái)幫助實(shí)現(xiàn).EventEmitter的核心功能就是事件觸發(fā)和事件監(jiān)聽(tīng).
import {EventEmitter} from 'events';
const CounterStore = Object.assign({}, EventEmitter.prototype, {
getCounterValues: function() {
return counterValues;
},
emitChange: function() {
this.emit('changed');
},
addChangeListener: function(callback) {
this.on('changed', callback);
},
removeChangeListener: function(callback) {
this.removeListener('changed', callback);
}
});
引完庫(kù)文件之后,通過(guò)代碼拷貝創(chuàng)建了一個(gè)CounterStore對(duì)象,而拷貝的內(nèi)容就是EventEmitter.prototype,這樣就可以使用prototype提供的響應(yīng)方法.
1.getCounterValues函數(shù)是為了獲取當(dāng)前計(jì)數(shù)器初始值的,這個(gè)跟EventEmitter無(wú)關(guān).
2.emitChange:這個(gè)函數(shù)調(diào)用了emit,這是EventEmitter提供的功能,用來(lái)廣播一個(gè)特定事件,第一個(gè)參數(shù)是事件名稱,字符串.這個(gè)方法是一個(gè)做匯總的模塊用的.
3.addChangeListener:添加監(jiān)聽(tīng),用EventEmitter提供的on進(jìn)行綁定,第一個(gè)參數(shù)是事件名稱,第二個(gè)參數(shù)是對(duì)應(yīng)的回調(diào)函數(shù),這個(gè)函數(shù)將在View界面?zhèn)鬟^(guò)來(lái)
4.removeChangeListener:移除,跟on功能想法,但是刪除對(duì)應(yīng)的回調(diào)函數(shù)要和添加的時(shí)候是同一個(gè),這跟JQ移除事件的要求是相同的
5.View
通過(guò)了Store,就要通過(guò)View來(lái)具體呈現(xiàn),
import CounterStore from '../stores/CounterStore.js';
class Son extends Component {
componentDidMount() {
CounterStore.addChangeListener(this.onChange);
}
componentWillUnmount() {
CounterStore.removeChangeListener(this.onChange);
}
onChange() {
// 更改數(shù)據(jù)內(nèi)容
}
}
在裝載和摧毀兩個(gè)周期調(diào)用監(jiān)聽(tīng)的函數(shù),同時(shí)設(shè)置回調(diào)函數(shù)onChange,onChange里就對(duì)應(yīng)了對(duì)數(shù)據(jù)的操作.在View的時(shí)候,只能使用Store的get方法,而Store也沒(méi)有set方法就是為了防止V直接去修改M上的數(shù)據(jù),如果想改Store的數(shù)據(jù),可以在發(fā)送action,重新一個(gè)新的流程,避免了傳統(tǒng)MVC數(shù)據(jù)上的混亂
整個(gè)過(guò)程從點(diǎn)擊按鈕開(kāi)始,到最后數(shù)字+1結(jié)束,完成了一個(gè)閉合的操作
