diff算法流程图
2021-10-24 22:28:57 5 举报
diff算法流程图
作者其他创作
大纲/内容
清空oldVnode的elm中的innerText,ele中的children设置为newVnode的children
是
oldVnode和newVnode是不是同一节点
newVnode的子节点是递归出来的
暴力删除oldVnode,插入newVnode
oldVnode有没有Children
oldVnode的elm属性中的innerText设置为newVnode的text
没有(意味着newNode有children)
是虚拟节点
是dom节点
对下一层子节点开始递归diff
**子节点更新策略才是diff算法的核心内容**(对比newVnode和oldVnode的children)1. 新前和旧前2. 新后和旧后3. 新后和旧前(相等时,新前指向的节点,移动到旧后之后)4. 新前和旧后(相等时,新前指向的节点,移动到旧前之前)5. 如果都没有命中,就需要用循环来查找**命中一种就不再进行判断:前指针后移,后指针前移;开启下一轮循环判断**
oldNode
相同
不相同
不是
调用patch函数
newVnode有没有text属性
有(对比二者的children)
调用updateChilren开始核心diff判断
newVnode和oldVnode的text是否相同
没有
有
什么都不做
将oldNode包装为虚拟节点
判断依据:标签名是否相同或者key是否一致
0 条评论
下一页