认识React

React 的起源与发展

React 是用于构建 用户界面 的 JavaScript 库，起源于 Facebook 的内部项目，该公司对市场上所有

JavaScript MVC 框架都不满意，决定自行开发一套，用于架设 Instagram 的网站。于 2013 年 5月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 的特性

1. 声明式设计： React 采用声明范式，可以轻松描述应用。

2. 高效： React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。

3. 灵活： React 可以与已知的库或框架很好地配合。

4. JSX ： JSX 是 JavaScript 语法的扩展。 React 开发不一定使用 JSX ，但官方文档中建议使用

它。

5. 组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

React 的设计理念

1.React 并不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V （ View ），甚至 React 并不非

常认可 MVC 开发模式

2.专注视图层。专注于提供清晰、简洁的 View （视图）层解决方案的同时又包括 View 和

Controller

3.极简的 API 。只提供组件化相关的非常少量的 API ，尽可能地让用户使用原生 JavaScript 进行

开发

4.将一个复杂的 UI 界面看成是由许多的独立小块组合而成的。每一个独立的小块被称为组件

React 与 MV* 的关系

MVC的开发模式

用户对视图层 (view) 的操作会交给 controller ， controller 完成相对应的业务逻辑后会要求

model( 数据层 ) 去改变数据， model 中数据的改变会触发 view( 视图层 ) 的更新。是单向的数据

绑定

MVVW的开发模式

view( 视图层 ) 和 model( 数据层 ) 之间并不会建立任何联系， viewModel 是建立两者之间联系的

桥梁。

View 与 ViewModel 之间通过双向绑定建立联系，这样当 View （视图层）变化时，会自动更新

到 ViewModel （视图模型），反之亦然

vm 的理解： 视图模型层。 Model 层中的数据往往是不能直接跟 View 中的控件一一对应上的，

所以，需要再定义一个数据对象 ( 虚拟 DOM) 专门对应 view( 真实 DOM) 上的控件。而

ViewModel 的职责就是把 model 对象封装成可以显示和接受输入的界面数据对象

MVVM和MVC的区别

1. MVVM 实现了 view( 视图层 ) 和 model( 数据层 ) 之间的双向绑定，而 MVC 只实现了

model( 数据层 ) 和 view( 视图层 ) 之间的单向绑定。即当 model 中的数据发生改变时

view( 视图 ) 会更新，但是 view( 视图 ) 改变时 model( 数据 ) 不会更新。

2. MVVM 中实现了将 model( 数据层 ) 中的数据对象转成 view( 视图层 ) 中的真实 DOM 的封

装，可以以最小的代价实现对 dom 的操作，而 MVC 中并没有做这样的处理。因此需要频

繁的操作 DOM ，降低了页面性能，用户体验差。