React中Flux与redux
source link: https://blog.51cto.com/u_13349380/5615885
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React中Flux与redux
精选 原创
react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能
在ES5中，我们可以通过mixins使用，继承对象中的属性和方法
但是ES6中，提供了extends关键字实现了继承，因此就移除了mixins，所以我们可以通过extends实现混合的继承。分成两步
第一步 定义混合类，继承组件基类
第二步 组件类，继承混合类
这样组件类，通过混合类就继承了组件基类
之所以分成两步，是因为es6没有实现多继承。
继承混合类之后，我们还可以重写它们的方法，这样，我们重写的方法就覆盖了原来的方法，当我们在组件中使用方法的时候，优先使用我们定义的方法。
import Start from '../start/start';
// 定义组件类，继承混合类，并暴露接口
export default class Css extends Start {
// 重写方法
constructor(props) {
super(props);
// 初始化状态
this.state = {
title: '全局 CSS 样式',
intro: '设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。',
data: [],
// 请求地址
url: 'data/css.json'
}
}
}
React是一个视图层面的框架，因此自身处理数据很薄弱，例如发送异步请求，需要axios框架。当然处理组件间通信成本很高，所以react团队才提出了flux思想
在传统的MVC模式中，模型和视图是可以双向访问的，所以就形成了一个网状结构，当系统足够复杂的时候，我们增加一个模块或者减少一个模块，成本将成指数上升。
react团队提出flux思想，将整个数据流变成是单向循环的，因此无论系统多么复杂，我们也可以抽象成是一个流动方向，因此就降低了我们的维护成本
早期flux只是提供了架构思想，因此很多开发者，根据这一思想实现了很多框架，如reflux，redux，vuex等等
action 组件或用户发布的消息
dispatcher 捕获消息的对象，并处理数据
store 用来存储数据的
view 组件视图
一个组件发布action，
这个action被dispatcher捕获到，
dispatcher根据action修改数据
并将修改后的数据存储在store中
store更新了，就将新的数据传递给另一个组件
reflux与redux区别
都是基于flux思想实现的创建，但是对组件传递数据是有区别的
reflux是基于组件的状态为组件传递数据的（会用观察者模式模拟）
用于ES5开发中
redux是基于组件的属性为组件传递数据的（工作中常用）
用于es6开发中
redux
reflux是在flux思想之上，对flux做了简化，移除了dispatcher，因此将处理数据的逻辑放在了store中，就增强了store
view 组件视图
action 发布的消息
store 存储数据的
一个组件发布action消息
消息被store捕获了
store根据消息处理数据
将处理的结果传递给另一个组件
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK