Flux從提出到現(xiàn)在先先后后看了好多次，看官方demo的時(shí)候感覺有些理解，過后又說不出個(gè)一二，所以今天抽空從項(xiàng)目目錄結(jié)構(gòu)的創(chuàng)建都自己來實(shí)現(xiàn)一遍，感覺對(duì)Flux的理解比前面看的時(shí)候要好。
Flux: 單向數(shù)據(jù)流，View(Component)交互觸發(fā)Action，Action通過Dispatcher發(fā)布事件，Store響應(yīng)Dispatcher發(fā)布的事件，更新數(shù)據(jù)，發(fā)出Change事件，View響應(yīng)change事件，更新View。View不應(yīng)該通過Store直接操作數(shù)據(jù)。
Flux只是一種模式，不是隨拿隨用的框架，因此這些需要自己實(shí)現(xiàn)。
我在學(xué)習(xí)時(shí)寫的是一個(gè)簡(jiǎn)單的評(píng)論列表樣例，用戶可以在輸入框中寫評(píng)論，點(diǎn)擊評(píng)論提交，然后實(shí)時(shí)渲染到評(píng)論列表中。
目錄結(jié)構(gòu)
用戶與View交互產(chǎn)生Action
（這里也可以直接引用Store進(jìn)而操作數(shù)據(jù)，不過就造成了View和Store的直接交互。）
Action調(diào)用Dispatcher.dispatch()發(fā)布事件
Action是一個(gè)全部交互個(gè)改變的入口，需要自己注冊(cè)Action用于后續(xù)調(diào)用，一個(gè)Action由actionType和payload組成
Dispatcher發(fā)布事件
Dispatcher將Action和Store聯(lián)系在一起，Action中通過Dispatcher.dispatch({actionType, payload})來分發(fā)事件，Store中通過Dispatcher.register(function(action))來響應(yīng)其注冊(cè)的Action。
Store對(duì)響應(yīng)的數(shù)據(jù)做出改變，需要通知View數(shù)據(jù)已經(jīng)變化并進(jìn)行更新。
但是Store本身并沒有發(fā)布/接收事件的功能，因此要借助其他模塊的方法。這里使用Node的events的EventEmitter，以及object-assign來實(shí)現(xiàn)對(duì)象間的繼承。
這樣一來，整個(gè)組件就已經(jīng)運(yùn)作起來了:
- 用戶輸入信息后點(diǎn)擊提交按鈕，?Action.create(); --View層
- Action中對(duì)應(yīng)的action方法被觸發(fā)，發(fā)布事件Dispatcher.dispatch('create', payload); --Action層
- Dispatcher發(fā)布create事件。 --Dispatcher層
- 注冊(cè)了對(duì)應(yīng)Dispatcher的Store接收create事件，更新數(shù)據(jù)。更新完畢后，發(fā)布change事件。 --Store層
- 注冊(cè)了相應(yīng)Store注冊(cè)事件的View相應(yīng)change事件，更新視圖。 --View層
一次單向數(shù)據(jù)流循環(huán)結(jié)束。
總結(jié):
對(duì)于flux這個(gè)概念性的東西，果然還是動(dòng)手做了才對(duì)其有所體會(huì)啊~~其實(shí)是我腦子笨，理解力不行~~！React v0.14.0也有了一些變化，同時(shí)也體驗(yàn)了一下webpack打包文件的強(qiáng)大功能，頁面引入一個(gè)bundle.js就夠了。
因?yàn)閯?chuàng)建項(xiàng)目時(shí)命名上有些不一致，所以看起來可能有點(diǎn)亂亂的感覺→_→，作為一次學(xué)習(xí)總結(jié)，雖然寫得爛，萬一能幫到其他人呢，所以就發(fā)出來了~ ：）
