diff 算法的两个假设
- Two elements of different types will produce different trees.(不同类型的元素生成不同的树状结构。)
- The developer can hint at which child elements may be stable across different renders with a
keyprop.(通过 key 属性的设置,开发者可以告诉 react 框架,那些元素在两次渲染中保持稳定。)
diff 算法
对不同的情况做不同的处理
不同类型的元素(Elements Of Different Types)
删除旧的元素,生成新的元素。
相同类型的元素(DOM Elements Of The Same Type)
对属性进行比较,保留相同的属性,更新变化的属性,对于 style 属性,不做完全替换,只更新发生变化的样式。
相同类型的组件元素(Component Elements Of The Same Type)
?
递归子元素
通过 key 的方式来判断那些子元素发生了变化(被删除,更换位置,新增)