数据计算轮

跨组件驱动变化,a子树驱动b子树的变化…等等操作,执行用户自身编写的函数,计算新的属性值,打标记,标记哪些组件状态发生变化。

diff 比较轮

A组件状态发生变化,生成A组件新树,与A组件老的树进行比较,同级比较。看看DOM树有没有发生变化,有的话,打上标记【新增,删除,更新】

渲染轮

根据标记,产出对应的变化。

Diff 算法,什么时候可能导致副作用

当变化导致大量计算的时候,会导致大量性能消耗

diff 对比

当我们执行到componentUpdateFn时,与初始化逻辑唯一不同的便是要走更新方法。以下就是diff的核心方法。

  1. 顺序比对
  2. 倒序比对
  3. 新增
  4. 移除
  5. 乱序(我们重点来看这种比较)