React的diff算法

React的diff算法主要是两个Tree的比较。

传统的Tree diff算法复杂度是O(n^3),React是算法通过一些策略将复杂度将为O(n).

1. 优化策略

1. 网页中的DOM跨层级移动的特别少,可以忽略不计
2. 相同类型的组件生成相似的树形结构,不同类型的组件生成不同的树形结构
3. 同一层级的节点,可以通过唯一id来区分

2. 优化算法

基于以上的策略,React对diff算法进行了一下优化

1. tree diff

只对同一层级的节点进行比较,跨层级移动,直接销毁子树,在目的节点完全插入子树,这样只需对树进行一次遍历,便能完成整个DOM树的比较

2. component diff

1. 同一类型组件,按照tree diff进行同级比较,并且增加了shouldComponentUpdate钩子来判断组件是否发生变化,无变化,不比较,从而节省diff时间
2. 不同类型组件,将组件标记为dirty component,从而替换整个组件下的所有子节点

3. element diff

对于同一层级的element,通过唯一id,可以优化其新增,修改,删除操作


在开发React组件时,保持DOM结构的稳定有助于提示性能。

参考:https://segmentfault.com/a/1190000004913592
   https://segmentfault.com/a/1190000010686582

原文地址:https://www.cnblogs.com/mengff/p/9867336.html