React、从性能出发、轻量级的视图层库

一、React是Facebook开发的一款JS库

React起源于Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

Facebook认为MVC模式会使他们的项目变得更加复杂,致使代码变得脆弱和不可预测，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。

主要是为了解决什么问题?

官网中有这样一段话

We built React to solve one problem: building large applications with data that changesover time.
构建那些数据会随时间改变的大型应用

---

 

二、 React的特点

虚拟DOM与Diff算法

我们以前操作 dom 的方式是通过 类似 document.getElementById() 的方式，这样的过

程实际上是先去读取 html 的 dom 结构，将结构转换成变量，再进行操作；但这样直接操作DOM元素的方式代价太大，且重复创建和删除的部分太多。

      reactjs 定义了一套变量形式的 dom 模型，一切操作和换算直接在变量中，这样减少了

操作真实 dom ，性能真实相当的高，和主流 MVC 框架有本质的区别，并不直接和 dom

打交道，而是创建一份虚拟DOM；

在虚拟DOM中保存了一个真实DOM的重要标识及属性；在数据改变时，react会先生成一份新虚拟DOM；然后再根据diff算法进行比较，得出最终要渲染的DOM，才进行渲染。

react内置了一套diff算法，diff算法中有一个key属性，作为唯一标识，通常key值应该来自你的数据，最好是ID。如果数据改变了，diff会根据你提供的key来思考发生了什么，判断你的操作是插入，删除还是重排。diff算法会保证最优的方式去对比，最小的代价去更新。

浅谈一下key

一般在动态渲染时才需要你给key，如果你不给key，默认会同级对比，只是你不给key系统会给你报错。key作为唯一标识，最好给个ID，当然在实际项目中给的最多的还是index，那么给index还是同级对比，所以给index就跟没给一样，而且在你数据量很少时，你可以适当的用item.name这种数据，只要你能确保你的item.name中没有重复。所以：一个好的key可以帮你提高很多性能

那么细心的同学就要问了，vue不是也有虚拟DOM和diff算法嘛？

没错，vue抄的react

 jsx

JSX将HTML语法直接加入到JavaScript代码中，再通过翻译器转换到纯JavaScript 后由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。

在实际开发中只要记住，js里需要写标签的时候用（包裹）；标签里需要写js的时候用{包裹}

具体的转换

//转换前
<div id='1'>标签</div>
//转换后
React.createElement('div',{id:1,}'标签')

 React与传统MVC的区别

MVC 模式

mvc 是一种使用 mvc （ model view controller 模型 - 视图 - 控制器）设计创建 web 应用

程序的模式 ；是包括 view 视图层、 controller 控制层、 model 数据层。各部分之间的通信都

是单向的。

model （模型）表示应用程序核心数据（比如数据记录列表）

view （视图）负责显示数据

controller （控制器）处理输入（写入数据库记录）（ react 主要放在控制器里，适合

开发中大型项目）

View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态

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

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

并不非常认可 MVC 开发模式； React 构建页面 UI 的库。可以简单地理解为， React 将

将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就

成了我们的页面

 

浅谈

 为什么在实际项目开发react比vue使用的要多？

因为vue是社区开发，是以尤雨溪为首的兴趣者，开发并维护的，他们是不挣钱的，未来一旦有人员流动，前人负责的模块难以交接，很可能未来的某一天vue就停止更新了；

react是Facebook公司开发并维护的，只要这个公司不倒，那这个公司的程序员就会持续维护更新；

所以成熟一点的公司都会选择react来开发项目。