虚拟DOM的介绍:
虚拟DOM就是一个真实DOM转换的JS对象。
虚拟DOM的机制:
在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的俩次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。
虚拟DOM性能更快的原因:
真实的DOM中有各种DOM事件,属性,而虚拟DOM中没有那么多无用的东西,所以当浏览器去进行遍历的时候,遍历虚拟DOM的速度是比真实DOM快非常非常多的,而且虚拟DOM还有diff算法,又将算法的复杂度降低了一个维度。
关于虚拟DOM的diff算法请看:https://blog.csdn.net/weixin_43606158/article/details/89422894