React18学习之四.MVC与MVVM模式

1.React是Web前端框架

        +React

        +Vue

        +Angular

主流思想：不在直接去操作DOM，而是改为“数据驱动思想”

操作DOM思想：

        +操作DOM比较消耗性能（主要院系就是：可能会导致DOM重排（回流）/重绘）

        +操作起来也相对来讲麻烦些

2.数据驱动思想

        +我们不会直接操作DOM

        +我们去操作数据，当我们修改了数据，框架会按照相关的数据，让页面重新渲染

        +框架底层实现视图的渲染，也是基于操作DOM完成的

                +构建了一套虚拟DOM到真是DOM的渲染体系

                +有效避免了DOM的重排/重绘

        +开发效率更高，最好的性能也相对较好

3.React框架采用的是MVC体系

MVC: model数据层 + view视图层 + controller控制层

@1我们需要按照专业的语法去构建视图（页面）：React中是基于jsx语法来构建视图的

@2构建数据层：但凡在视图中，需要动态处理的（内容或者样式），我们都要有对应的数据模型

@3控制层：当我们在视图中进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据重新渲染视图，让用户看到最新的效果

数据驱动视图的渲染

视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现

“单向驱动”

4.Vue框架采用的是MVVM体系

MVVM：model数据层 + view视图层 + viewModel数据/视图监听层

@1 数据驱动视图的渲染：监听数据的更新，让视图重新渲染

@2 视图驱动数据的更改： 监听页面中表单元素内容改变，自动去修改相关的数据

“双向驱动”