中反应的通量是什么

本篇内容主要讲解”中反应的通量是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习”中反应的通量是什么”吧!

通量是反应中反应的类似于vuex的公共状态管理方案,它是Facebook官方给出的应用架构,利用数据的单向流动的形式对公共状态进行管理。

本文操作环境:Windows7多系统,react17.0.1,戴尔G3。

<强>反应通量是什么?

<强>中反应的通量

通量是反应中的类似于vuex的公共状态管理方案,它是Facebook官方给出的应用架构,利用数据的单向流动的形式对公共状态进行管理。现已不推荐使用。但是为了能更好的理解回来的方案,还是有必要熟悉通量的工作流程滴~

使用cnpm我通量- s的方式进行安装。

<强>通量的组成

<李>

视图:视图层

<李>

行动:视图发出的消息

<李>

调度员:派发者,用来接收行动,执行回调函数

<李>

存储:数据层、存放状态,一旦发生改动,

<强>通量的工作流程

通量在进行数据更新时,会经历以下几步:

<李>

用户与视图层交互,触发行动

<李>

操作使用调度员。调度将行动自己的状态发送给调度员

<李>

调度员通过登记注册事件,再通过行动传入的类型来触发对应的存储回调进行更新

<李>

商店里进行相应的数据更新,并触发视图层事件使试图也同步更新

<李>

视图层收到信号进行更新

用代码的形式详细展开:

用户与视图层交互,触发行动

组件中:

& lt; button  onClick =, {this.handler.bind()}祝辞更新数据& lt;/button>

操作使用调度员。调度将行动自己的状态发送给调度员

组件中:

//,步骤1,事件的回调函数 　　处理程序(){ 　　,,,//,行动是一个描述,定义一个独特的常量,用来描述你的数据更改的方式。 　　,,,let  action =, { 　　,,,,,,,类型:“NUM_ADD" 　　,,,}; 　　,,,dispatcher.dispatch(行动) 　　}

调度员通过调度员。登记注册事件,再通过行动传入的类型来触发对应的存储回调进行更新

调度员构造函数依赖的通量需要单独下载:cnpm我通量- s

调度员文件中:

import {调度员},得到& # 39;通量# 39; 　　import  store 得到& # 39;。/指数# 39; 　　const  dispatcher =, new 分配器();//,注册方法注册事件,通过行动传入的类型来触发对应的,Store 回调进行更新 　　dispatcher.register((行动)=祝辞{ 　　,,,开关(action.type) { 　　,,,,,,,case “NUM_ADD":, 　　,,,,,,,,,,,/*,调用相应的商店里定义好的方法,*/,,,,,,,,,,,store.handleAdd (); 　　,,,,,,,,,,,休息; 　　,,,,,,,case “Num_REDUCE": 　　,,,,,,,,,,,store.handleReduce () 　　,,,,,,,,,,,休息; 　　,,,} 　　}) 　　export  default 分配器;

商店里进行相应的数据更新,并触发视图层事件使试图也同步更新

事件订阅对象的封装:观察者事件机制封装

存储文件中:

import  observer 得到& # 39;. ./观察者# 39; 　　let  store =, Object.assign(观察者,{ 　　,,,状态:{ 　　,,,,,,,n: 10 　　,,,}, 　　,,,getState () { 　　,,,,,,,return  this.state; 　　,,,}, 　　,,,//,store 中的行动对应的处理方法,更新商店的数据,并触发更新视图的方法 　　,,,handleAdd () { 　　,,,,,,,this.state.n  + +; 　　,,,,,,,发出(“update")美元。 　　,,,}, 　　}) 　　export  default 存储;

视图层收到信号进行更新

在构造函数里用美元在做事件订阅,并定义一个做状态更新的方法作为回调:

组件中:

//,…//,在这里进行事件订阅,以让视图得到更新 　　构造函数(){ 　　,,,超级(); 　　,,,this.state =, store.getState (); 　　,,,商店。在美元(“update", this.handleUpdate.bind(这)) 　　}//,…//,事件订阅的回调,更新视图方法 　　handleUpdate () { 　　,,,this.setState (store.getState ()); 　　}

至此,在第4步中触发的方法在此执行,数据就得到了更新。一个完整的通量体系更新数据的流程就完成了。

中反应的通量是什么