diff 算法

211 阅读1分钟

diff 算法的两个假设

  1. Two elements of different types will produce different trees.(不同类型的元素生成不同的树状结构。)
  2. The developer can hint at which child elements may be stable across different renders with a key prop.(通过 key 属性的设置,开发者可以告诉 react 框架,那些元素在两次渲染中保持稳定。)

diff 算法

对不同的情况做不同的处理

不同类型的元素(Elements Of Different Types)

删除旧的元素,生成新的元素。

相同类型的元素(DOM Elements Of The Same Type)

对属性进行比较,保留相同的属性,更新变化的属性,对于 style 属性,不做完全替换,只更新发生变化的样式。

相同类型的组件元素(Component Elements Of The Same Type)

递归子元素

通过 key 的方式来判断那些子元素发生了变化(被删除,更换位置,新增)