前端优化的主要方面就是减少页面的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,是不是很简单?