react中的flux是什么

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

本文主要解释“什么是反应中的流动”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“什么是流量在起作用”!

React flux是一个类似于vuex的公共状态管理方案。这是脸书官方给出的应用架构,以单向数据流的形式管理公共状态。

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

react flux是什么?

React中的Flux

Flux是一个类似于vuex的公共状态管理方案。这是脸书官方给出的应用架构,以单向数据流的形式管理公共状态。不再推荐。不过为了更好的理解Redux方案,还是要熟悉flux的工作流程~

使用cnpm i焊剂-S进行安装。

flux的组成

视图:视图层

操作:视图中的消息

Dispatcher: Dispatcher,用于接收Action并执行回调函数。

存储:数据层,存储状态,一旦改变,

flux的工作流程

react中的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

(0)

相关推荐

  • C++中怎么使用try和catch捕获异常

    技术C++中怎么使用try和catch捕获异常这篇文章主要介绍“C++中怎么使用try和catch捕获异常”,在日常操作中,相信很多人在C++中怎么使用try和catch捕获异常问题上存在疑惑,小编查阅了各式资料,整理出

    攻略 2021年11月29日
  • Mysql RELICATION对存过的处理是怎样的

    技术Mysql RELICATION对存过的处理是怎样的本篇文章给大家分享的是有关Mysql RELICATION对存过的处理是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说

    攻略 2021年11月20日
  • 如何理解LayaAir中的EventDispatcher类

    技术如何理解LayaAir中的EventDispatcher类这篇文章将为大家详细讲解有关如何理解LayaAir中的EventDispatcher类,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后

    攻略 2021年11月11日
  • 怎么用Python来统计知识星球打卡作业

    技术怎么用Python来统计知识星球打卡作业本篇内容主要讲解“怎么用Python来统计知识星球打卡作业”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Python来统计知

    攻略 2021年11月29日
  • php数据类型的永久转换函数是哪个

    技术php数据类型的永久转换函数是哪个本篇内容主要讲解“php数据类型的永久转换函数是哪个”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php数据类型的永久转换函数是哪个”吧

    攻略 2021年12月13日
  • mysql中自增id的示例分析

    技术mysql中自增id的示例分析这篇文章主要介绍了mysql中自增id的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。对于auto_increm

    攻略 2021年11月6日