平武建站

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的工作流程

react中flux是什么意思
flux的工作流程

flux 在进行数据更新时，会经历以下几步：

  1. 用户与 View 层交互，触发 Action

  2. Action 使用 dispatcher.dispatch 将Action自己的状态发送给dispatcher

  3. dispatcher 通过register注册事件，再通过Action传入的类型来触发对应的 Store 回调进行更新

  4. Store 里进行相应的数据更新，并触发 View 层事件使试图也同步更新

  5. 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://pwwzsj.com/article/jodhdi.html

其他资讯