React之框架、数据绑定

一、 MVC/MVP/MVVM

1. 简介

        不同于设计模式，只是为了解决一类问题而总结出的抽象方法，而一种架构模式往往能使用多种设计模式。 MVC/MVP/MVVM是三种常见的架构模式。

（1）Model：数据模型，主要负责对数据进行获取和存放。

（数据，要么是从服务器上获取的数据，要么是本地数据库中的数据，或者用户在UI上填写的表单。Model就负责从这些数据来源中获取数据）

（2）View：视图，负责渲染页面。

（它们有一部分是UI写死的，比如图片、按钮等，有一部分是会根据数据来更新显示的，比如好友列表等，架构模式主要解决的就是根据数据来显示View的问题）

这三种架构模式的M、V都相同，主要区别在于实现解耦Model和View的方案不同。

2. MVC

各部分的通信方式如下：

                                

Controller：控制器，是M和V之间的协调者，把Model中的数据赋值给View来显示 或者 View接受用户输入的数据，由Controller把这些数据传给Model。

1. View传送指令到Controller

2. Controller完成业务逻辑后，要求Model改变状态

3. Model将新的数据发送到View，用户得到反馈

如上图，所有通信都是【单向】的。 

3. MVP

各部分的通信方式如下：

                          

 MVP将Controller改名为Presenter（发布层），同时改变了通信方向。

1. 各部分之间的通信，都是双向的

2. View和Model不发生联系，都通过Presenter传递

3. View非常薄，不部署任何业务逻辑，将所有逻辑都部署在Presenter。

4. MVVM

                           

 MVVM最大的改变在于采用双向绑定，View的变动，自动反映在ViewModel上，反之亦然。

注意：React并不是mvvm，因为它不是双向数据绑定，只是一个单向数据流的库，通过状态驱动视图。

5. 优缺点

MVP将MVC中的Presenter换成了Presenter，实现了模型和视图的彻底分离，而且View不部署任何业务逻辑，所有逻辑都部署在Presenter中。MVVM将Presenter换成了ViewModel，基于与MVP一致，只是它采用了双向绑定（View的变动、自动反映在ViewModel上，反之亦然）。

（1）MVC

        优点：耦合性低，降低了View和Model的耦合性。

        缺点：View和Model仍存在一定的耦合，因此View层不能复用，产生很多冗余代码。

        主要应用于后端，Spring MVC，前端也有Backbone。

（2）MVP

        优点：完全分离了View层和Model层，所以View层可以抽离出来做组件，在复用性上比MVC好很多。

        缺点：由于所有数据都需要经过Presenter层”手动同步”，因此Presenter层会比较臃肿，维护难度比较大。

        主要用于安卓开发，前端应用不多。

（3）MVVM

        优点：引入了数据绑定，解决了MVP中数据同步比较麻烦的问题。

        缺点：需要用到Vue等脚手架工具，体积比较大。

        主要用于Web前端。

                         

二、数据绑定

单向数据绑定：更新model会自动更新view，但反过来不会。（React）

双向数据绑定：model和view，更新其中一个，另一个会自动更新。（Vue 1.0）

react是单向数据绑定

               

        当用户访问view时，通过事件进行交互，然后通过事件函数中的actions调用setState来更新state，从而触发View的重新渲染。可以看出，View是不能直接修改State的，必须通过Actions来操作。

单向数据绑定的优缺点，

优点：所有状态的变化都可以被记录，可追溯。（父组件状态不会意外被子组件修改，而是通过dispatch一个action修改全局状态）

缺点：代码量较多，因为会有很多类似的dispatch action代码。