react 之 flux
【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的更多相关文章
- 使用 React 和 Flux 创建一个记事本应用
React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- react及flux架构范例Todomvc分析
react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 ...
- 理顺react,flux,redux这些概念的关系
作者:北溟小鱼hk链接:https://www.zhihu.com/question/47686258/answer/107209140来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- [React] 07 - Flux: uni-flow for react
相关资源 Ref: [Android Module] 03 - Software Design and Architecture Ref: Flux 架构入门教程 Ref: 详解React Flux架 ...
- 【11】react 之 flux
Flux 是 Facebook 使用的一套前端应用的架构模式.React 标榜自己是 MVC 里面 V 的部分,那么 Flux 就相当于添加 M 和 C 的部分. 1.1. Flux介绍 Flux并 ...
- 浅谈 React、Flux 与 Redux
React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 ...
- React: 研究Flux设计模式
一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...
- 【react redux && flux】
redux: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html https://bai ...
随机推荐
- 关于Mysql select语句中拼接字符串的记录
在mysql的SELECT语句中拼接两列(或多列)的字符串显示: mysql> select concat(dname,loc) from dept; 以上语句便把dept表的dname,loc ...
- 企业网站的SSL签证生产测试以及https配置方法
这一次要做企业网站怎么获得安全的数字证书,没有数字证书的话,在浏览器访问网站的时候会跳出不安全界面,而且钓鱼网站也会让用户进去个假网站,一般企业可以去阿里云去买数字证书,买好之后浏览器便会加载这个数字 ...
- java并发学习--第九章 指令重排序
一.happns-before happns-before是学习指令重排序前的一个必须了解的知识点,他的作用主要是就是用来判断代码的执行顺序. 1.定义 happens-before是用来指定两个操作 ...
- Django【第17篇】:Django之信号
django中的信号 Django中的信号及其用法 Django中提供了"信号调度",用于在框架执行操作时解耦. 一些动作发生的时候,系统会根据信号定义的函数执行相应的操作 Dja ...
- python中strftime和strptime函数
strftime和strptime函数均来自包datetime from datetime import * strftime: 将datetime包中的datetime类,按照入参格式生成字符串变量 ...
- Python---协程---重写多进程
一. # 匹配一行文字中所有开头的字母import re s = 'i love you but you don\'t love me' # \b\m findallcontent = re.find ...
- day1 instance,round,divmod,imput, 字符串
>>> a = '123' >>> isinstance(a, str) True >>> b = 1 >>> type(b ...
- 解决Intellij IDEA中项目不能识别yml配置文件
问题:能读取资源路径下的properties配置文件但是不能读yml配置文件 因为无法读取配置yml配置文件,所以不能配置bean,导致项目启动报错. 解决方法: 在VM options中设置虚拟机加 ...
- SonarQube规则之bug类型
1.".equals()" should not be used to test the values of "Atomic" classes.bug 主要不要 ...
- 10个你不得不知的WEB移动端开发的兼容问题
1.IOS下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决 2.一些情况下对非可点击元素如(label,span)监听 ...