深刻理解React（-） --JSX和虚拟DOM

React是什么呢？用官网的话就是这么个鬼   “一个用来构建用户界面的javescript库”

react和backbone，angular等mvc框架不一样，他只处理view逻辑，他只处理view逻辑，他只处理view逻辑，。。

   通俗点讲就是在js中写html的东西

jsx使用的是预编译模板，和以前的模板没什么区别，react提供了一个预编译工具叫react-tools，可以通过npm命令安装，一般是在开发时期运行，运行后他会启动一个监听程序，实时监听jsx源码的修改，然后自动编译为js代码。

 React.createElement()，它这么做，目的就是为了实现 虚拟 DOM。

React最大的亮点----------虚拟DOM

传统web app 和 DOM直接交互，由app来控制DOM的构建和渲染，元素属性的读写，事件的注册和销毁等等。。

当新产品刚上线的时候，这种做法看起来也挺好的，但是随着产品功能越来越丰富，代码量越来越多，开发团队人员越来越多。。

虽然合理的代码规划能够这类问题，但团队里难免会有擅长屠宰式变成的同学，

  React的虚拟DOM和单向数据流就能很好的解决这个问题

虚拟DOM就是在DOM的基础上建立了一个抽象层，我们对数据和状态所有的任何人改动，都会被自动且高效的同步到虚拟DOM，最后在批量同步到DOM中。

虚拟DOM会使得App只关心数据和组件的执行结果，中间产生的DOM操作不需要APP干预，而且通过虚拟DOM生成DOM。会有一项非常可观的收益---性能。。

所有人都知道DOM慢，渲染一个空的div，浏览器需要为这个div生成几百个属性，而虚拟dom则需要6个dom

所以说减少不必要的重排重回以及DOM读写能够对页面渲染性能有大幅提升

那么react是怎么做的呢？

react会在内存中维护一个虚拟DOM树，当我们对这个树进行读或者写的时候实际上是对虚拟DOM进行的，当数据变化时候，然后react会自动更新虚拟DOM，然后拿新的虚拟DOM和旧的虚拟DOM进行对比，找到有变更的部分，得出一个Patch，然后将这个Patch放到一个队列里面，最终批量更新这些Patch到DOM中。

这样的机制可以保证即便是根节点数据的变化，最终表现在DOM上的修改也只是收这个数据影响的部分，这样可以保证非常高效地渲染。

。

但是也会有一定的缺陷--首次渲染大量DOM时因为多了一层虚拟DOM的计算，会比innerHTML插入方式慢

props    

   主要作用是提供数据来源，可以简单的理解为props就是构造函数的参数。

state唯一的作用是控制组件的表现，用来存放会随着交互变化状态，比如开关状态等。。

jsx做的事情就是根据state和props的值，结合一些视图层面的逻辑，输出对应的DOM结构。。