数据计算轮
跨组件驱动变化,a子树驱动b子树的变化…等等操作,执行用户自身编写的函数,计算新的属性值,打标记,标记哪些组件状态发生变化。
diff 比较轮
A组件状态发生变化,生成A组件新树,与A组件老的树进行比较,同级比较。看看DOM树有没有发生变化,有的话,打上标记【新增,删除,更新】
渲染轮
根据标记,产出对应的变化。
Diff 算法,什么时候可能导致副作用
当变化导致大量计算的时候,会导致大量性能消耗
diff 对比
当我们执行到componentUpdateFn时,与初始化逻辑唯一不同的便是要走更新方法。以下就是diff的核心方法。
- 顺序比对
- 倒序比对
- 新增
- 移除
- 乱序(我们重点来看这种比较)