React基本原理-虚拟DOM

前端优化的主要方面就是减少页面的DOM操作，减少重排和重绘，React在这方面做了优化，采用了所谓的虚拟DOM，其实大家不要被概念吓住了，我们平时也会遇到虚拟DOM，只是你没有注意罢了，请听我娓娓道来。
所谓的虚拟DOM就是JavaScript对象，就是在没有真实渲染DOM之前做的操作，给你举几个例子来看看：
1）createElement（‘Button’）
这就创建了一个虚拟的button，为啥？因为没有插入到实际页面中去，这就是虚拟DOM！屌不屌
2）DocumentFragment（文档碎片 ）
创建虚拟的节点，一次性插入页面结构
方法:使用DocumentFragment=====>>>>>>是一个占位符，把它插入节点的时候是插入它所有的子节点，本身不会插入
举个例子来说：

var frag=document.createDocumentFragment();
for(var i=0;i<10;i++){
var l=document.createElement("li");
l.innerHTML="ss";
frag.appendChild(l);
}
document.getElementById("list").appendChild(frag);

对啊，说的很对啊，上面的就是虚拟DOM！
那么React的虚拟DOM是怎么回事？
由于React使用了jsx语法，每一个组件返回的都是jsx对象，那么会在其中进行一次转化，将jsx对象转化为js对象节点，最后再插入页面结构中去。
当然React在其中做了一些列优化处理，使用了diff算法，来判断哪些需要进行DOM操作。