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