Flux 深刻理解

阿li雲雙12 又來了，低至 1折 ，真心以爲很划算了，能夠點擊本條內容直接參與。活動頁面【查看更多】裏面又89/年的服務器，能夠買來學習或放博客

Flux的出現是複雜app重構的必然結果. 若是你僅僅只是想寫幾個小demo, 或者小產品, 那麼使用Flux 徹底是得不償失的. 由於他的複雜度, 可能比你的業務邏輯還多. so, what’s Flux on earth? 很簡單, flux 是利用訂閱發佈模式的一種語法糖. 他包含4個部分: Action,Dispatch,Store,View. 能夠看下圖的基本架構.

雖然, 上面是一個閉環, 可是,起點應該從哪裏開始呢？ 很簡單, 從用戶開始==> View. 經過View 觸發不一樣的Action, 而後經過中介者模式, 觸發對應的Store, 來對數據執行不一樣的操做, 而且,若是須要更新視圖的話, 就須要在Store裏面調用this.setState方法.

Ps: 若是你的項目不大的話, 就不要用flux了. 由於這樣,真的沒用.

ok, 咱們來實踐一下, 使用React+Flux 來模仿人的行爲. run ,speak, walk. 首先定義Action:

const Dispatcher = require('flux').Dispatcher;
let manager = new Dispatcher();
// 定義行爲
const Actions = {
	run(){
		manager.dispatch({
			type:'RUN',
			time:4
		})
	},
	speak(){
		manager.dispatch({
			type:'SPEAK',
			time:10
		})
	},
	walk(){
		manager.dispatch({
			type:'WALK',
			time:20
		})
	}
}
複製代碼

這裏補充Dispatcher兩個api:

• dispatch: 用來觸發事件. 向register的管理中心傳遞信息
• register: 用來處理全部經過dispatch觸發的內容

這裏, 咱們定義一下Store. 用來進行計時. 這裏, 額外用到了fbemitter這個類庫, 用來實現事件型的訂閱發佈模式. 實際上,他的工做和Dispatcher是同樣, 經過事件觸發來傳遞信息. 不過,fbemitter能夠正對不一樣類型的事件進行觸發, 事實上, 咱們若是要求不高, 徹底可使用fbemitter進行代替Dispatcher.

const EventEmitter = require('fbemitter').EventEmitter;
let emitter = new EventEmitter();
// 定義Store

const Store ={
	time:0
}
Store.dispatchToke = manager.register((action)=>{
		Store.time+=action.time;
		emitter.emit('change',Store.time,action.type);
})
複製代碼

最後,來看一下關鍵的組件部分

class Person extends Component{
	constructor(){
		super();
		this.state={
			time:Store.time
		}
	}
	componentDidMount(){
		this.subscription = emitter.addListener('change',(time,type)=>{
			alert(` now I am ${type}ING I spend ${time} minutes`);
			this.setState({
				time:time
			})
		})
	}
	render(){
		return (
			<div> <button onClick={this.run.bind(this)}>run</button>{' '} <button onClick={this.speak.bind(this)}>speak</button>{' '} <button onClick={this.walk.bind(this)}>walk</button>{' '} </div>
			)
	}
	run(){
		Actions.run();
	}
	speak(){
		Actions.speak();
	}
	walk(){
		Actions.walk();
	}
}
複製代碼

最後咱們來梳理一下Flux的總體架構吧.

那應該怎麼寫Flux呢？ 由於Flux已經把數據流的流向給定死了, 因此, 這也只給了咱們一條思惟路徑. 由Action=>Store=>View=>Event

• 首先,瞭解你須要經過View的事件,執行那些動做. 全部的事件都是爲了完成一些列動做而設置, 因此, 這也能夠很容易抽象出Actions. 而且設置相應的dispatch傳入適當的參數.

• 抽離全部的數據處理, 所有放到Store裏. 在Store裏,進行Dispatcher 的 register. 實現Actions和Store的鏈接. 設置Store 須要進行頁面更新的自定義事件.

• 在UI組件中, 經過this.state 獲取Store 暴露的原始數據. 在componentDidMount或者constructor 中,綁定Store設置的自定義事件. 而且UI中,設置事件和Actions的鏈接. 這裏,就實現了 Store=>View=>Action 的single-direction.