react diff算法

传统的diff算法的算法复杂度为O(n^3) n为树中节点的总数 性能消耗严重

react diff通过引入虚拟dom,将算法的复杂度转换成O(n)

diff策略

1.dom节点跨层级的操作特别少,可以忽略不计

2.拥有相同类的两个组件会生成相似的属性结构,拥有不同类的两个组件会生成不同的树形结构

3.对于同一层级的一组子节点,他们可以通过唯一key值进行区分

tree diff 

因为dom节点跨层级的移动操作少到可以忽略不计,所以react通过updateDepth对虚拟dom树进行层级控制,当发现节点不存在,会直接删除,如果涉及到跨层级的操作,会进行该跟节点的树的重建,会影响react性能。(所以,保持稳定的dom结构会有助于性能的提升,例如用css隐藏节点,而不是移除节点) 

component diff

如果是同一类型的 依旧按照同层级比较的方法

有可能虚拟dom没有变化,可以通过shouldComponentUpdate来判断组件是否需要diff 

如果不是同一类型 则将该组件判断为dirty component ，从而替换整个组件下所有子节点

合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.

到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

element diff

对于同一层级的一组子节点,他们可以通过唯一key值进行区分

(在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。)