【WangQi】---flux---【react】

 

一、什么是Flux

  Flux 是一种架构思想,专门解决软件的结构问题。它跟MVC 架构是同一类东西,但是更加简单和清晰。

二、flux的基本概念

  

  (1) 、Flux由4部分组成

  1、View:视图层

  2、Action(动作):视图发出的消息(比如mouseClick)

  3、Dispatcher( 派发器 ) :用来接收Action、执行回调函数

  4、Store(数据层):用来存放应用的状态,一旦发生改动,就提醒View更新页面

  

  (2)、Flux的流程
  1、用户访问View

  2、View发送用户的Action

  3、Dispatcher收到Action,要求Store进行相对应的更新

  4、Store更新后,发出一个“onchange”事件

  5、view接受到“onchange”事件后,更新页面

三、store代码流程

四、组件中调用Store

import Store from "./store";

class App extends Component{

constructor(props){

super(props);

//调用公共数据

this.state = Store.getState();

}

五、创建Dispatcher.js

安装flux:cnpm install flux --save-dev

(1)在View层的方法中创建Action并传递给dispatcher  方法: dispatcher.dispatch(Action)

(2)判断类型Action的type是否相等,如果相等则调用Store的方法进行修改数据(注意:修改数据的方法只能在Store中使用,这样的方式很类似于后端的MVC模式)

六、监听数据变化

数据发生改变View层页面进行更新

(1)在Store中有提供数据改变的函数,在数据改变的函数中调用事件触发this.on("事件名称")

(2)同时在Store中在创建一个函数,函数内部进行事件监听供View层调用,当事件触发时会调用这个函数,然后我们this.setState进行数据的改变

Store中的事件监听和触发

组件中调用事件监听的方法用于改变数据

如果还想细化代码结构我们还可以将Action分离出去(尝试一下)

在项目中Store和dispatcher可以有多个,非常灵活

除此之外我们的View层既有view层又有controller层所以我们还可以进行再次拆分

react 之 flux的更多相关文章

  1. 使用 React 和 Flux 创建一个记事本应用

    React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...

  2. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  3. react及flux架构范例Todomvc分析

    react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 ...

  4. 理顺react,flux,redux这些概念的关系

    作者:北溟小鱼hk链接:https://www.zhihu.com/question/47686258/answer/107209140来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  5. [React] 07 - Flux: uni-flow for react

    相关资源 Ref: [Android Module] 03 - Software Design and Architecture Ref: Flux 架构入门教程 Ref: 详解React Flux架 ...

  6. 【11】react 之 flux

    Flux 是 Facebook 使用的一套前端应用的架构模式.React 标榜自己是 MVC 里面 V 的部分,那么 Flux 就相当于添加 M 和 C 的部分. 1.1.  Flux介绍 Flux并 ...

  7. 浅谈 React、Flux 与 Redux

    React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 ...

  8. React: 研究Flux设计模式

    一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...

  9. 【react redux && flux】

    redux: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html https://bai ...

随机推荐

  1. STM32程序加载与调试

    1.STM32程序的ISP下载,只能使用串口1,其它串口不可以.

  2. 《Java核心技术卷I》——第3章 Java的基本程序设计结构

    byte和short类型主要用于特定的应用场合,例如,底层的文件处理或者需要控制占用存储空间量的大数组. 十六进制数值有一个前缀0x(如0xCAFE),八进制有一个前缀0,如010对应八进制中的8.很 ...

  3. Protobuf(一)——Protobuf简介

    Protobuf简介 ​ 什么是 Google Protocol Buffer? 假如您在网上搜索,应该会得到类似这样的文字介绍: ​ Google Protocol Buffer( 简称 Proto ...

  4. 计蒜客 蓝桥模拟 A. 结果填空:矩阵求和

    给你一个从 n×nn \times nn×n 的矩阵,里面填充 111 到 n×nn \times nn×n .例如当 nnn 等于 333 的时候,填充的矩阵如下.   1 1 2 3 2 4 5 ...

  5. bzoj5089 最大连续子段和 分块+复杂度分析+凸包

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5089 题解 本来打算迟一点再写这个题解的,还有一个小问题没有弄清楚. 不过先写一下存个档吧. ...

  6. rpm安装jdk

    rpm安装jdk:(https://blog.csdn.net/daerzei/article/details/80136457) 1.卸载系统自带的JDK rpm -qa|grep java # x ...

  7. compile and link C/CPP programs on Mac

    ref: https://stackoverflow.com/questions/29987716/cannot-use-gsl-library-on-macos-ld-symbols-not-fou ...

  8. Linux学习-samba服务

    一.Samba介绍 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成. SMB (Server Messages Block,信息服务块) 是一种在局域网 ...

  9. python-获取类名和方法名,动态创建类和方法及属性

    获取类名和方法名1.在函数外部获取函数名称,用.__name__获取2.在函数内部获取当前函数名称,用sys._getframe().f_code.co_name方法获取3.使用inspect模块动态 ...

  10. ASP:CheckBox获取前台的checked的属性

    后台代码: for (int i = 0; i < this.GvCourses.Rows.Count; i++) { CheckBox chb = this.GvCourses.Rows[i] ...