一、什么是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/C++ 基本类型 占字节

    下面给出不同位数编译器下的基本数据类型所占的字节数: 16位编译器 char :1个字节char*: 2个字节(即指针变量)short: 2个字节int:  2个字节unsigned int : 2个 ...

  2. 【LeetCode】758. Bold Words in String 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...

  3. 【LeetCode】137. Single Number II 解题报告(Python)

    [LeetCode]137. Single Number II 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/problems/single- ...

  4. Sentry 开发者贡献指南 - SDK 开发(性能监控:Sentry SDK API 演进)

    内容整理自官方开发文档 本文档的目标是将 Sentry SDK 中性能监控功能的演变置于上下文中. 我们首先总结了如何将性能监控添加到 Sentry 和 SDK, 然后我们讨论 identified ...

  5. 4.1.4 统计“锦途网”旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量

    查看本章节 查看作业目录 需求说明: 统计"锦途网"旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量 在 MySQL ...

  6. Java初学者作业——编写Java程序, 在控制台输入数字,计算表达式1-2+3-4……+(2*n-1)+2*n的结果。

    返回本章节 返回作业目录 需求说明: 编写Java程序, 在控制台输入数字 计算表达式1-2+3-4--+(2*n-1)+2*n的结果. 实现思路: (1)声明变量 n 和 sum,用于存储用户输入的 ...

  7. gPRC基本介绍

    1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...

  8. MATLAB 错误之生成step图表出错

    m文件: step(Gi_close) hold on 错误示例: 使用step函数生成图表后,报错如下: Plots must be of the same type and size to be ...

  9. JEP解读与尝鲜系列4 - Java 16 中对于 Project Valhalla 的铺垫

    这是 JEP 解读与尝鲜系列的第 4 篇,之前的文章如下: JEP解读与尝鲜系列 1 - Java Valhalla与Java Inline class JEP解读与尝鲜系列 2 - JEP 142 ...

  10. 通过脚本升级PowerShell

    Update Powershell through command line https://superuser.com/questions/1287032/update-powershell-thr ...