diff策略
React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度
-
策略一(tree diff):
Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。 -
策略二(component diff):
拥有相同类的两个组件 生成相似的树形结构,
拥有不同类的两个组件 生成不同的树形结构。
同一类型的两个组件,组件A变化为组件B时,可能Virtual DOM没有任何变化,如果知道这点(变换的过程中,Virtual DOM没有改变),可节省大量计算时间,所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。
不同类型的组件,将一个(将被改变的)组件判断为dirty component(脏组件),从而替换 整个组件的所有节点。
- 策略三(element diff):
对于同一层级的一组子节点,通过唯一id区分。
Vue diff算法和react diff算法区别
-
vue比对节点,当节点元素类型相同,但是className不同,认为是不同类型元素,删除重建,而react会认为是同类型节点,只是修改节点属性
-
vue的列表对比,采用的是两端到中间比对的方式,而react采用的是从左到右依次对比的方式(利用元素的index和标识lastIndex进行比较,如果满足index < lastIndex就移动元素,删除和添加则各自按照规则调整)。