本文主要解释“什么是反应中的流动”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“什么是流量在起作用”!
React flux是一个类似于vuex的公共状态管理方案。这是脸书官方给出的应用架构,以单向数据流的形式管理公共状态。
本文操作环境:Windows7系统,react17.0.1,戴尔G3。
react flux是什么?
React中的Flux
Flux是一个类似于vuex的公共状态管理方案。这是脸书官方给出的应用架构,以单向数据流的形式管理公共状态。不再推荐。不过为了更好的理解Redux方案,还是要熟悉flux的工作流程~
使用cnpm i焊剂-S进行安装。
flux的组成
视图:视图层
操作:视图中的消息
Dispatcher: Dispatcher,用于接收Action并执行回调函数。
存储:数据层,存储状态,一旦改变,
flux的工作流程
更新数据时,Flux将经历以下步骤:
用户与视图层交互并触发操作。
使用dispatcher.dispatch将操作自身的状态发送给dispatcher。
Dispatcher通过register注册事件,然后通过Action传入的类型触发相应的Store回调进行更新。
存储以更新相应的数据,并触发视图层事件以尝试同步更新。
视图层接收要更新的信号。
以代码的形式详细展开:
用户与视图层交互并触发操作。
组件:
button click={ this . handler . bind(this)}更新数据/buttonAction使用dispatcher.dispatch将操作本身的状态发送给dispatcher。
组件:
//步骤1事件的回调函数
handler(){ 0
//action是一个描述,它定义了一个唯一的常量来描述数据如何变化。
let action={ 0
type:'NUM_ADD '
};
dispatcher.dispatch(动作)
}dispatcher通过dispatcher.register注册事件,然后通过Action传入的类型触发相应的Store回调进行更新。
Dispatcher构造函数所依赖的流量需要单独下载
在调度程序文件中:
从“流量”导入{ Dispatcher }
importstorefrom ' '。/index '
const dispatcher=new dispatcher();
//register方法注册事件,并通过动作传入的类型触发相应的Store回调进行更新。
dispatcher . register((action)={ 0
不间断空格
; 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中的flux是什么”有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/115168.html