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的通知后,更新数据