作者： Helios_nannan

今天听了部门的高T分享的react和其他框架思想的对比，真的是受益匪浅，所以特地把高T分享的总结一下。
前端开发本质上是一种展现层开发，我思考了一下这句话，这句话用人话说就是前端开发本身就是写界面的。但是别人能把写界面的能总结成下面一个循环，我发现这真的是能力了。如下图，有略微的改动：
image.png
()
下面就开始进入正题了。

基于MVC的前端开发

简单的MVC

先看下图：
image.png
用户操作界面
当用户操作的视图的时候会派发一个事件给Action
当Action接受到这个事件的时候，调用Model对应的方法

演进的前端MVC

image.png
用户操作界面
当用户操作的视图的时候会派发一个事件给Action
当Action接受到这个事件的时候，调用Model对应的方法
Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
当Model改变了，派发一个事件给Action

进一步复杂的前端MVC

image.png
用户操作界面
当用户操作的视图的时候会派发一个事件给Action
当Action接受到这个事件的时候，调用Model对应的方法
Model得知view改变了，然后进行相应的操作，改变自身所存储的数据
当Model改变了，派发一个事件给Action
当Action知道Model的数据变化的时候，调用views中的方法
view改变自身
但是这样是有下面两个问题的，
- 交互增加导致view的控制代码迅速膨胀，最终导致代码不可维护
- Model的控制代码也会变多，
以至于出现下面的状况：
image.png

前端的MVVM

虽然mvc有以上的弊端，但是因为没有一个好的架构思想去取代他，所以也只能用MVC了，但是随着前端angular的横空出世，倡导的MVVM思想也随之深入人心，先看下图：
image.png
view和viewModel的数据双向绑定
当用户操作view的时候，viewmodel也进行对象对应的变化
这样，我们能通过操作Model来控制view的显示，一个页面的比如能拆分为小功能(注册/登陆、表单提交、XXX功能)这样每个功能对应一个Model，我们就能模块化的管理Model，就变为了下图：
image.png
所以当用户操作界面的时候，我们viewModel就知道是哪部分发生了变化，对应的viewModel就进行改变。

React一种新的思想

了解React的都知道，React对强大的功能就是vdom，能够计算出最有效也是花费最小的vdom和真实dom的差异并进行改变。
下图为MVVM的整体设计思路：
image.png
用户操作view
dispatch view事件给状态管理
状态管理工具更新状态/进行到下一个状态
根据新的状态，render view
React遵从的是单向的数据流：
- 存在一个Model到React的映射关系，即view的渲染方法
- view并不知道自己对应Modle哪一块
- 于是每次Model的变更，view全部更新。React的vdom算法保证了render的高效

MVVM和React

要解决的问题： 复杂的web交互导致view更新逻辑的爆炸
解决思路：
- MVVM：记录Model、双向绑定，Model变更时更新view对应部分
- React：实现view高效更新算法，Model变更时更新整个view
MVVM的实现是在工程上进行解决，React在解决思路(算法)上进行解决
——————————-
作者：Helios_nannan
来源：CSDN
原文：https://blog.csdn.net/woshinannan741/article/details/76034586
版权声明：本文为博主原创文章，转载请附上博文链接！