react中flux是什么意思
react中flux是什么意思,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
目前创新互联已为数千家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器租用、企业网站设计、吉林网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
在react中,flux是一个公共状态管理方案,是用来构建客户端Web应用的应用架构,利用数据的单向流动的形式对公共状态进行管理。
本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。
什么是flux
flux 是 react 中的类似于 vuex 的公共状态管理方案,它是 Facebook 官方给出的用来构建客户端Web应用的应用架构,利用数据的单向流动的形式对公共状态进行管理。
它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速的上手Flux。
使用 cnpm i flux -S
的方式进行安装。
flux的组成
View:视图层
Action:视图发出的消息
Dispatcher:派发者,用来接收Action,执行回调函数
Store:数据层,存放状态,一旦发生改动,
flux的工作流程
flux的工作流程
flux 在进行数据更新时,会经历以下几步:
用户与 View 层交互,触发 Action
Action 使用 dispatcher.dispatch 将Action自己的状态发送给dispatcher
dispatcher 通过register注册事件,再通过Action传入的类型来触发对应的 Store 回调进行更新
Store 里进行相应的数据更新,并触发 View 层事件使试图也同步更新
View层 收到信号进行更新
用代码的形式详细展开:
1、用户与 View 层交互,触发 Action
组件中:
2、Action 使用 dispatcher.dispatch
将Action自己的状态发送给dispatcher
组件中:
// 步骤1 事件的回调函数 handler(){ // action是一个描述,定义一个独特的常量,用来描述你的数据更改的方式。 let action = { type:"NUM_ADD" }; dispatcher.dispatch(action) }
3、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;
4、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;
5、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进行管理
每个需更新视图的组件都需要进行更新函数的绑定
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
当前标题:react中flux是什么意思
文章源于:http://myzitong.com/article/jodhdi.html