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操作。

jsx===》js对象（createElement）==》插入页面
这就是所谓的虚拟DOM，是不是很简单？