Flux/Redux/MVC概念及架构图记录

MVC是一种架构思想,大部分情况都能通过视图、模型、控制器来接偶,实现数据和界面的流动交互,但是现在更多的一些思想概念也出来了,比如Flux,下面就简单的列一下:

一般MVC交互流程图:

MVC

下面是复杂情况下的MVC交互流程图:

MVC Multi

第二种之所以会复杂,是因为一个View对应了多个Model,这种情况通过拆分View或者合并Model也是可以解决的。

Flux是Facebook推出的一种组织web应用开发的架构思想,它的基本思想很简单:在你的应用中,数据应该是单向流动的。

Flux

和MVC相比,Flux一个最大的区别就是数据的流动是单向的。

Redux官方的描述Redux is a predictable state container for JavaScript apps,其中predictable和state container体现了它的作用。那么如何来理解可预测化的呢?这里会有一些函数式编程方面的思想,在Redux中reducer函数是一个纯函数,相同输入一定会是一致的输出,所以确定输入的state那么reducer函数输出的state一定是可以被预测的,因为它只会进行单纯的计算,保证正确的输出。
State Container状态容器又是什么?说明Redux有一个专门管理state的地方,就是Store,并且一般情况下是唯一的,应用中所有state形成的一颗状态树就是Store。Redux由Flux演变而来,但受 Elm 的启发,避开了 Flux 的复杂性,我们看看其数据流向:

Redux

基于Flux,但是经过改进的Redux,通过对Store的改造、Dispatcher的替换,使得更加灵活,易于组装,View和Action层都会变得简单。

无所谓好坏,需要结合需求情况、团队人员和基础框架这些因素,去选择一个合适的。