【React】----flux 学习总结
flux:
脚手架安装:
cnpm install create-react-app
create-react-app my-demo
安装路由dom
cnpm install react-router-dom --save-dev
cnpm install flux --save-dev
1、是一种构架思想,专门解决软件的结构问题
2、基本概念:
1、四部分组成
view:视图层
action:视图发出的动作
dispatcher:接收action 执行回调
store:存放数据,一旦发生改变就(events中的emit、on)提醒view更新页面
2、执行流程:
用户访问view,发出动作action,dispatcher接收到action,store通过事件更改数据,更改完毕后通过events中的emit、on通知view层更新页面
3、代码操作流程
1、创建store仓库,从events模块引入emit on方法
import EventEmitter from 'events'
合并对象
const Store = Object.assign({},EventEmitter.pototype,{
state:{}存放数据
getState(){} 获取数据
})
export default Store 导出Store
view中引入Store
this.state=Store.getState()
2、view 触发事件 发出action
const action={
type:'',
value:''
}
(创建dispatcher
import {Dispatcher} from 'flux'
const dispatcher = new Dispatcher()
export default dispatcher)
引入dispatcher
import dispathcer from '...'
通过dispatcher的dispatch方法接收action
dispatcher.dispatch(action)
在dispatcher中接收
import
dispatcher.register((action)=>{
通过判断action.type类型,来调用Store的方法执行修改操作,所以要引入store
switch (action.type){
case 'CHANGE_ITEM'
Store.handleChange(action.value)
break;
default:
break;
}
})
3、数据发生改变,dispatcher通知store更改数据
handleChange(val){
this.state.…… = val
通过events中的emit触发
this.emit('updata')
}
定义一个方法,哪个组件需要调用数据,就调用这个方法
handleUpdate(fn){
this.on('updata',fn)
}
4、view中调用handleUpdate方法,来更改数据
Store.handleUpadate(this.handleUpdate.bind(this))
handleUpdate(){
this.setState(Store.getState())
}