react学习笔记之redux

react flux

FLUX

    

Flux不是一个具体的框架，是facebook大牛们提出的一种代码架构，一种思想

现在市场上并没有一个成熟的Flux的框架，Facebook并没有推出，有一些个小牛们有做出来的，没人用，尴尬，那就等吧

React呢被包含到Flux里面去了，被当做视图来定义，但是Flux呢又不是非得用react，毕竟Flux只是一个思想，想用什么用什么，在提出的时候拿react来举例子了

Flux是对于前端整体的一个组织方案

那为什么要有这个Flux呢，因为Facebook的大牛觉得MVC只使用中小型系统，对于太大型的项目来说呢，又有点太复杂，各种C，各种M，还有各种V，难免会导致耦合度太高，一个M层的数据可能要去很多V层去显示，一旦出错，就各种错

Flux的目的是保证逻辑清晰，数据流向单一清晰，依赖关系清晰

来看这个图图

 

 

左边的两个代表后端的东西咱们不管，右边的循环咱们来看看

好啦，这个就是Flux思想的导向图，代表了Flux架构的流程走向

比如一个表单的逻辑怎么走，咱们看看Flux是怎么做的

首先，最下面的大蓝代表咱们的视图，里面有一个表单，它左边的小蓝，说明用户要在这里搞来搞去了，搞什么呢？比如，输入一些个内容，这个时候嘞，就会把这个操作传递到左边的大粉红，呀，这个东东就会根据咱们的操作去产生一个action小粉红，小粉红就会把值传给它右边的大黑dispatcher，这个东东呢，咱们理解成一个cpu处理器，各种计算，大黑开始处理咱们的数据，然后就会去调用所对应的大黄store，大黄其实数据仓库 ，大黑要把数据给大黄呀，怎么给，就是通过小黄，回调函数，大黄拿到数据之后，就改吧改吧之后 ，就要去和下面的大蓝去说，我的数据改好啦，你给咱变吧，怎么去说呢，就是通过咱们的大绿，大绿是什么呢，其实就是一个事件啥的，这样呢，大蓝也就会相对应的有一个更改。

Flux架构的执行过程

1.input回车：view发生操作，接下来应该发送action到dispatcher

2.因为view上input进行操作了，所以现在给dispacther发送了一个action

3.dispatcher接受到action，然后根据action的type判断后通知store进行数据的更改

4.dispatcher经过判断后通知store添加一条数据

5.store开始更改数据

6.store发送一个change事件，通知view进行数据的更新

7.view接受到store的通知后，更新数据