Vue和React中的diff算法核心

虚拟dom

• js对象替代真实dom, 更改避免回流(重新渲染),一次性通过render函数渲染成真实dom
• 声明的样子
• 输出的样子

实现render函数生成真实dom

• 设置属性
• render函数
• 渲染函数

diff算法

• diff算法其实就是对dom进行different比较不同的一种算法(虚拟的比较更节约性能)
  __ 补丁:用来更新dom的任务__

比较原则

• 平级对比
  • 
• 不跨级对比(无a__删除__a)
• 同级复用
  • 

遍历规则

• 先序深度优先遍历(从根节点向下级子节点遍历)
  • 
  • 125叫广度优先
  • 12345深度优先

实现diff函数

• 比较思路规则
  • 1. type相同,比较属性,属性不同生成补丁包patch{type:'attrs',attrs:{class:'xx'} }
    2. 新节点在原dom中不存在{type:'remove',index:xxx}
    3. 节点类型不同,直接替换{type:'replace',newnode:xxx}
    4. 文本变化{type:'text',text:'xxx'}