React中Flux与redux

Posted 2022-08-26 公众号_前端每日技巧

混合

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
      
  

Flux

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根据消息处理数据

将处理的结果传递给​​另一个组件​​