不难懂------react-flux
一、什么是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的更多相关文章
- 构建具有用户身份认证的 React + Flux 应用程序
原文:Build a React + Flux App with User Authentication 译者:nzbin 译者的话:这是一篇内容详实的 React + Flux 教程,文章主要介绍了 ...
- react+flux编程实践(一) 基础篇
1. React概览 最初听到React而还未深入了解它时,大多数人可能和我的想法一样:难道又是一个新的MVC/MVVM前端framework?深入了解后发现不是这么一回事,React关注的东西很单纯 ...
- 不难懂--------react笔记
在jsx中不能使用class定义类名 因为class在js中是用来定义类的 定义类名的时候用className label中的for必须写成htmlFor Rea ...
- [React] 07 - Flux: uni-flow for react
相关资源 Ref: [Android Module] 03 - Software Design and Architecture Ref: Flux 架构入门教程 Ref: 详解React Flux架 ...
- react及flux架构范例Todomvc分析
react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 ...
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- 学习react
推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...
- 理解Flux架构
本文摘自<Flux架构入门教程>和<谈一谈我对 React Flux 架构的理解>.也有自己的观点和总结.转载请注明出处. 一.Flux架构描述 1. Flux是什么 Flux ...
- 1.6 flux介绍
这一节将介绍 React 的核心应用架构模式 Flux,包括内容: Flux 介绍 MVC 架构之痛 Flux 的理解 Flux 相关库和工具介绍 Flux 与 React 实例 最后我们将会把之前的 ...
随机推荐
- C/C++ 基本类型 占字节
下面给出不同位数编译器下的基本数据类型所占的字节数: 16位编译器 char :1个字节char*: 2个字节(即指针变量)short: 2个字节int: 2个字节unsigned int : 2个 ...
- 【LeetCode】758. Bold Words in String 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcode ...
- 【LeetCode】137. Single Number II 解题报告(Python)
[LeetCode]137. Single Number II 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/problems/single- ...
- Sentry 开发者贡献指南 - SDK 开发(性能监控:Sentry SDK API 演进)
内容整理自官方开发文档 本文档的目标是将 Sentry SDK 中性能监控功能的演变置于上下文中. 我们首先总结了如何将性能监控添加到 Sentry 和 SDK, 然后我们讨论 identified ...
- 4.1.4 统计“锦途网”旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量
查看本章节 查看作业目录 需求说明: 统计"锦途网"旅游线路平均价格,并采用尽可能多的方式将该价格赋给用户会话变量 @avg_short_price,并输出该变量 在 MySQL ...
- Java初学者作业——编写Java程序, 在控制台输入数字,计算表达式1-2+3-4……+(2*n-1)+2*n的结果。
返回本章节 返回作业目录 需求说明: 编写Java程序, 在控制台输入数字 计算表达式1-2+3-4--+(2*n-1)+2*n的结果. 实现思路: (1)声明变量 n 和 sum,用于存储用户输入的 ...
- gPRC基本介绍
1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...
- MATLAB 错误之生成step图表出错
m文件: step(Gi_close) hold on 错误示例: 使用step函数生成图表后,报错如下: Plots must be of the same type and size to be ...
- JEP解读与尝鲜系列4 - Java 16 中对于 Project Valhalla 的铺垫
这是 JEP 解读与尝鲜系列的第 4 篇,之前的文章如下: JEP解读与尝鲜系列 1 - Java Valhalla与Java Inline class JEP解读与尝鲜系列 2 - JEP 142 ...
- 通过脚本升级PowerShell
Update Powershell through command line https://superuser.com/questions/1287032/update-powershell-thr ...