建立在以下三个方面的前提成立的React Diff优化策略:
1、跨层级的DOM移动操作较少,可以忽略不计。
2、同一层级的一组子节点可以通过唯一id区分。
3、拥有相同类的两个组件将会生成相似的树结构,拥有不同类的俩个组件则生成不同的树结构。
优化策略分为三部分:
1、Tree Diff 分层求异
只比较同一层级的节点,这样只需要对树进行一次遍历。因此尽量保持稳定的DOM结构,通过隐藏显示的方式,而不是删除和新建节点。
2、Component Diff
如果是同一类型的组件,按照原策略进行Virtual Dom tree Diff,允许用户直接通过shouldComponent来判断是否需要Diff;如果不是同一类型的组件,则直接标记为dirtyComponent,从而替换整个组件下的子节点。
3、Element Diff 设置唯一 key
通过key来判断当前节点是否可复用;尽量减少类似将最后一个节点移动到列表首部的操作