React技术基本介绍

React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。于2013年5月开源。

React的GitHub开源地址

https://github.com/facebook/react

React的优点

React编码人员只需针对数据进行操作，不对DOM进行直接操作，对DOM进行操作的工作交给React，降低开发难度
React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。
兼容性好：React会自动为我们解决浏览器兼容问题
组件化and模块化：在编写代码时可根据作用功能的不同进行拆分
单向数据流：在React中只能单向的传递数据

React缺点

React的数据传递从一个组件传递到另一个组件过程很麻烦，所以往往React还要配合数据层框架使用，React只适用于视图层

使用虚拟DOM有什么优点

什么是虚拟DOM：

虚拟DOM在这里就不详细介绍了，简单来说：虚拟DOM就是一个js对象。

优点

当React框架在发现页面中的数据state发生改变时，就会调用render方法来从新渲染页面，如果需要渲染一整个页面从新生成一个浏览器的真实DOM不仅性能低下而且耗时长，所以React就引入了虚拟DOM的概念。虚拟DOM实际是一个js对象，当state中的数据发生改变时，React框架就不用再需要针对当前页面再生成一个真实的DOM（生成一个真实的DOM所要时间远比生成一个虚拟DOM耗时、消耗性能，因为真实DOM是application，需要调用的api远比生成一个js对象麻烦），在与浏览器中的真实DOM进行对比（进行真实DOM的比对也是一个性能非常低下的过程），React对象在此时就会生成一个虚拟的DOM对象与之前生成的虚拟DOM进行对比，对比出数据的不同之处（两个虚拟DOM比对性能非常高，因为都是js对象），在把比对出的不同之处在浏览器的真实DOM进行修改操作。

// 原始数据
<div id="abc"><span>123</span></div>
// 虚拟DOM的大致结构
["div",(id="abc"),{[span,(),"123"]}]
// 修改后的数据
<div id="15c"><span>1515</span></div>
// 修改后的虚拟DOM
["div",(id="15c"),{[span,(),"1515"]}]
// 所有只需要比对两个虚拟的DOM就可以快速修知道需要修改真实DOM的哪里，性能可以得到很大的提升