diff算法初了解

2021-10-14  本文已影响0人  江川哇
一、虚拟DOM: 就是对象 就是数据

核心思想:提升性能的
核心思想解决的问题:数据的对比操作比dom操作快

二、diff算法

vue采用 snabbdom
react采用 virtual-dom

diff算法核心:提升性能
小的项目中使用 提升不了性能 大中型项目中才会用到

四、diff算法详解

1、旧的虚拟节点和新的虚拟节点进行比较(patch)最终吧新的虚拟dom节点展示在页面中
2、根据snabbdom了解h函数就是用来生成虚拟dom的,并且h函数的格式我猜想是

function h () {
  return {
    children:[]
    elm:undefined,
    sel:undefined,
    data:undefined,
    key:undefined,
    text:undefined
  }
}

3、 根据snabbdom了解到patch函数是做旧虚拟节点和新虚拟节点对比,最终把新的虚拟节点变成真实的dom渲染到页面上。patch就是diff算法的核心内容。

//了解旧虚拟节点和新虚拟节点比较规则:
1、如果节点不相同,暴力删除再创建添加
2、旧虚拟节点和新虚拟节点没如果  结构和顺序完全一样,直接return
3、如果不加key什么也不是,如果有Key 就算排序不一样,只要Key相同也不会重新创建新的节点

diff算法核心:【有2个指针 代表下标】
1、 旧前  和  新前
   old++ 、 new++
2、旧后 和 新后
   old--  new--
3、旧前 和 新后
   old++  new--
4、旧后 和 新前
   old--  new++
5、以上4个都不满足则遍历查找
6、以上5个都执行完 剩下的要不删除 要不创建
上一篇 下一篇

猜你喜欢

热点阅读