----flux----

一、flux由四部分组成
    (1)view:视图层
    (2)action:发出的动做,视图层发出的动做,onClick等
    (3)dispatcher:派发器,用来接收action,进行相应的数据处理
    (4)store:数据层,用来存放状态,一旦发生改变,就会通知视图层
 
flux的数据流程
 
一、view层的数据想进行修改,会给dispatcher发送一个action
    经过dispatcher.dispatch来发送action
    dispatcher.dispatch({
        type:"",
        value:
    })
二、dispatcher之中接收到action,进行对比,要求store进行相应的数据更新
    import {Dispatcher} from "flux"
    const dispatcher=new Dispatcher()
    dispatcher.register((action)=>{
        switch(action.type){
            case "":
            store.事件名称
        }
    })
三、store中进行数据处理,建立一个函数,在函数内部进行事件的监听供view层调用,触发的时候进行数据的改变
    handleUpdate(fn){
        this.on("update")
    }
四、在组件中调用事件监听的方法进行修改数据
    store.handleUpdate(this.handleUpdate.bind(this))
    handleupdate(){
        this.setState(store.getState())
    }
 
store是手动建立的
 
import EventEmitter = require("events")
const store =Object.assign({},EventEmitter.prototype,{
    state:{}
    getState(){
        return this.state
    }
})
 
export default store
相关文章
相关标签/搜索