虚拟dom和diff算法学习笔记

什么是虚拟dom

用一个对象来描述dom结构,这个对象就是虚拟dom。

为什么要用虚拟dom

因为操作dom 需要耗费性能,dom上有上百个属性和方法。计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面可以减少dom操作、
h方法就是根据dom的类型,属性,子节点、文本。产生一个虚拟dom
h.js里有createElement接受参数:type,props,...children,createElement,把key从props里取出来之后,里调用vNode(type,key,props,children),vNode返回一个对象。
render(vnode,container)方法将虚拟节点变为真实节点。看看什么类型,文本 元素 属性比对,比较老属性和新属性的差异,算出最新的,赋给dom上。

怎么比对?

如果type、key不一样,直接replaceChild,新节点替换掉老节点。
type、key一样,都是文本类型,直接修改textContent
type、key一样,都是节点类型,比对props,根据新节点的属性更新老节点的属性,对比children ,(老节点有,新节点没有-》删除老节点的innerHtml;老节点没有,新节点有-》给新节点的添加子节点;老节点有,新节点有-》updataChildren
updataChildren
标记新老节点的开始和结束指针,分5种情况,新头节点-老头结点 新尾结点-老尾结点 新头结点-老尾结点 新尾结点-老头结点,暴力对比(根据map结构,看老节点中是否有某个子节点,有的话,移动,没有的话添加。)

猜你喜欢

转载自www.cnblogs.com/superlizhao/p/12635479.html