Vue、React中的diff算法核心思路

虚拟DOM

js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM

不管你有没有用过这些框架，你仍然可以从中尝试体验DOM节点对比思路

声明的样子

输出的样子

设置属性

render函数

渲染函数

diff算法

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

平级对比

不跨级对比(无A删除A)

同级复用

遍历规则

先序深度优先遍历(从根节点向下级子节点遍历)

125叫广度优先

12345深度优先

实现diff函数

比较思路规则

type相同,比较属性,属性不同生成补丁包

patch }

新节点在原DOM中不存在

节点类型不同,直接替换

文本变化