首页天道酬勤介绍自己,react虚拟dom和diff算法

介绍自己,react虚拟dom和diff算法

张世龙 05-12 13:23 67次浏览
一、diff算法简介: 

上面代码的改变有很多种方式,第一种:我们可以将左边box这个div全都删掉然后替换成右边这个div(但这种方式感觉太大费周章),第二种方法:是我们可以保持原有的内容不发生变化只添加新增的内容。

像第二种这样进行精细化对比实现最小量更新我们称为diff算法

二、虚拟DOM :

用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。

diff算法是在两个虚拟DOM之间计算的,新虚拟DOM和老虚拟DOM进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的DOM上。

真实DOM如何变为虚拟DOM是属于mustache模板引擎的内容,在我们之前的模板编译中有讲解。

三、Snabbdom: 

snabbdom是著名的虚拟DOM库,是diff算法的鼻祖,Vue的源码借鉴了snabbdom。

注:本篇博客仅简单说明,详细内容我们会在后面的博客中介绍。 

vue解析dom,vue虚拟dom使用