您好,欢迎访问一九零五行业门户网

react flux是什么

react flux是react中的类似于vuex的公共状态管理方案,它是facebook官方给出的应用架构,利用数据的单向流动的形式对公共状态进行管理。
本文操作环境:windows7系统、react17.0.1、dell g3。
react flux是什么?
react中的flux
flux 是 react 中的类似于 vuex 的公共状态管理方案,它是 facebook 官方给出的应用架构,利用数据的单向流动的形式对公共状态进行管理。现已不推荐使用。但是为了能更好的理解 redux 方案,还是有必要熟悉 flux 的工作流程滴~
使用 cnpm i flux -s 的方式进行安装。
flux的组成
view:视图层
action:视图发出的消息
dispatcher:派发者,用来接收action,执行回调函数
store:数据层,存放状态,一旦发生改动,
flux的工作流程
flux 在进行数据更新时,会经历以下几步:
用户与 view 层交互,触发 action
action 使用 dispatcher.dispatch 将action自己的状态发送给dispatcher
dispatcher 通过register注册事件,再通过action传入的类型来触发对应的 store 回调进行更新
store 里进行相应的数据更新,并触发 view 层事件使试图也同步更新
view层 收到信号进行更新
用代码的形式详细展开:
用户与 view 层交互,触发 action
组件中:
<button onclick = {this.handler.bind(this)}>更新数据</button>
action 使用 dispatcher.dispatch 将action自己的状态发送给dispatcher
组件中:
// 步骤1 事件的回调函数handler(){ // action是一个描述,定义一个独特的常量,用来描述你的数据更改的方式。 let action = { type:"num_add" }; dispatcher.dispatch(action)}
dispatcher 通过 dispatcher.register 注册事件,再通过action传入的类型来触发对应的 store 回调进行更新
dispatcher构造函数依赖的flux需要单独下载:cnpm i flux -s
dispatcher 文件中:
import {dispatcher} from 'flux'import store from './index'const dispatcher = new dispatcher();// register方法注册事件,通过action传入的类型来触发对应的 store 回调进行更新dispatcher.register((action)=>{ switch(action.type){ case "num_add": /* 调用相应的store里定义好的方法 */ store.handleadd(); break; case "num_reduce": store.handlereduce() break; }})export default dispatcher;
store 里进行相应的数据更新,并触发 view 层事件使试图也同步更新
事件订阅对象的封装:observer事件机制封装
store文件中:
import observer from '../observer'let store = object.assign(observer,{ state:{ n:10 }, getstate(){ return this.state; }, // store 中的action对应的处理方法,更新store的数据,并触发更新视图的方法 handleadd(){ this.state.n ++; this.$emit("update") },})export default store;
view层 收到信号进行更新
在 constructor 里用 $on 做事件订阅,并定义一个做状态更新的方法作为回调:
组件中:
// ...// 在这里进行事件订阅,以让视图得到更新constructor(){ super(); this.state = store.getstate(); store.$on("update",this.handleupdate.bind(this))}// ...// 事件订阅的回调,更新视图方法handleupdate(){ this.setstate(store.getstate());}
至此,在第4步中触发的方法在此执行,数据就得到了更新。一个完整的flux体系更新数据的流程就完成了。
flux的缺点
频繁的引入 store
ui组件和容器组件的拆分过于复杂
无法对多个store进行管理
每个需更新视图的组件都需要进行更新函数的绑定
... ...
所以,现在在工作中已经不推荐用flux了。取而代之的是一套相对更完善的解决方案:redux。
推荐学习:《react视频教程》
以上就是react flux是什么的详细内容。
其它类似信息

推荐信息