React:Redux和Flux
React,用来构建用户界面,它有三个特点:
- 作为view,构建上用户界面
- 虚拟DOM,目的就是高性能DOM渲染【diff算法】、组件化、多端同构
- 单向数据流,是一种自上而下的渲染方式。
Flux
在一个React应用中,UI部分是由无数个组件嵌套构成的,组件和组件之间就存在层级关系,也就是父组件、子组件以及顶层组件。
当我们获取到数据后,根据React自上而下的渲染方式,我们把数据传给顶层组件,由顶层组件通过属性props,将数据传给各个子组件,这样数据就一层一层传递下去,各个子组件获取自己所需的数据,最终完成UI的渲染。
当有一个数据发生了变化后,是如何通知组件更新呢?思路如下:
- 定义一个数据存储store,它存储的是应用的当前的状态state;
- 用户操作导致数据变更的时候,就会触发一个action,告知store有数据变化了,以及哪些数据发生变化;
- store接收到通知后,就更新修改数据,返回新的数据传递到顶层组件。再进行一次自上而下的渲染,从而达到更新UI。
Flux是一种数据处理的模式,描述的是单向数据流的思想。让数据流变得简单,方便调试和追踪,所以它更适合与react结合使用。
Flux中,引入的dispatch、action、store和view模块,触发action时,需要使用dispatch来调度
Redux
Redux是FL