一、什么是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 应用程序

    原文:Build a React + Flux App with User Authentication 译者:nzbin 译者的话:这是一篇内容详实的 React + Flux 教程,文章主要介绍了 ...

  2. react+flux编程实践(一) 基础篇

    1. React概览 最初听到React而还未深入了解它时,大多数人可能和我的想法一样:难道又是一个新的MVC/MVVM前端framework?深入了解后发现不是这么一回事,React关注的东西很单纯 ...

  3. 不难懂--------react笔记

      在jsx中不能使用class定义类名   因为class在js中是用来定义类的  定义类名的时候用className       label中的for必须写成htmlFor         Rea ...

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

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

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

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

  6. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  7. 野心勃勃的React组件生命周期

    当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件    React实现了UI=Fn(St ...

  8. 学习react

    推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...

  9. 理解Flux架构

    本文摘自<Flux架构入门教程>和<谈一谈我对 React Flux 架构的理解>.也有自己的观点和总结.转载请注明出处. 一.Flux架构描述 1. Flux是什么 Flux ...

  10. 1.6 flux介绍

    这一节将介绍 React 的核心应用架构模式 Flux,包括内容: Flux 介绍 MVC 架构之痛 Flux 的理解 Flux 相关库和工具介绍 Flux 与 React 实例 最后我们将会把之前的 ...

随机推荐

  1. c(++)变长参数之整形(非字符串类型类似)

    0.序言 变长参数,接触的第一个可变长参数函数是 printf   , 然后是 scanf   .他们的原型如下: printf: _Check_return_opt_ _CRT_STDIO_INLI ...

  2. (数据科学学习手札133)利用geopandas绘制拓扑着色地图

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在绘制某些地图时,为了凸显出每个独立的 ...

  3. CLION 使用自己的makefile来运行

    之前参考过这里和这里,都是说要使用add_custom_target,无奈看不懂 但是前一篇里说它参考的是stackoverflow上的回答,去原帖里发现后来更新的第二高票答案!!!非常好用!!! 在 ...

  4. [黑科技]pb_ds库(G++)

    一.hash(速度快的恐怖).http://codevs.cn/problem/1230/ 1 #include<stdio.h> 2 #include<ext/pb_ds/asso ...

  5. 《python-美藏篇》1.可迭代、迭代器与生成器

    首先区分可迭代对象(Iterable).迭代器(Iterator) 可迭代对象:包含__iter__方法的对象为可迭代对象,如List.Tuple.Dictionary 迭代器:包含__iter__. ...

  6. Java EE数据持久化框架 • 【第4章 MyBatis动态SQL】

    全部章节   >>>> 本章目录 4.1 MyBatis动态标签 4.1.1  MyBatis动态标签介绍 4.1.2 < if >标签 4.1.3 update语 ...

  7. localstorage的浏览器支持情况

    localStorage的兼容性不错,就国内的情况,已经基本没有问题了.localStorage的原理很简单,浏览器为每个域名划出一块本地存储空间,用户网页可以通过localStorage命名空间进行 ...

  8. [学习笔记] RabbitMQ的安装使用

    安装 使用命令行安装,会自动管理依赖(推荐): choco install rabbitmq 安装包安装: 以管理员身份安装64位的 Erlang. 下载并安装 RabbitMQ 服务.下载地址. R ...

  9. IntelliJ IDEA 2020.1.1 x64 Debug 断点调试模式详解

    前言 对于初入职场的萌新们来说,很多都还不会 Debug 断点模式.记得我刚写代码的时候,也是通过 System.out.println() 一行一行的把变量打印出来看.其实强大的编辑器已经帮我们做好 ...

  10. 使用 navigator.userAgent.toLowerCase() 区别 浏览器 类型

    userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值 var ua = navigator.userAgent.toLowerCase(); 返回的是个字符串 ...