zoukankan      html  css  js  c++  java
  • 虚拟DOM和react中的diff算法总结

    一、虚拟DOM
    1.什么是虚拟DOM及原理
           把真实DOM树,变成js对象树,将之前的和新的作比较,通过diff算法,按照不同的地方进行渲染。
     
    2.什么情况下使用虚拟DOM
          当修改组件内部状态时,如props或state发生改变。
     
    二、diff算法
     
    1.使用传统的diff算法进行节点的循环遍历,复杂度是 O(n^3)。
     
    2.diff
         是逐层比较的算法,一旦发现节点消失,就删除,一旦发现新节点,就创建,发现相同的,就保留。
    3.缺点:
         (1)两棵树变化非常陡峭,是低效的。
         (2)兄弟节点排序和插入新节点是低效的。
     
     
    4.diff的两个重要假设,如下图:
          第二个假设是通过加key值来来区别兄弟节点。key不能使用index值,在插入数据时会产生新的问题,因为标识的index对应的值会发生变化。但是可以给index加“”,避免产生混淆。但最好使用id值。
    同层key值不能相等,不同层没有影响。
    5.diff算法
    (1)同层级的比较
        有3种方式,删除、移动和添加。
     
    (2)跨层移动:
            只进行同层级的比较,如果不同层级,不进行比较。如果进行跨层移动的话,它直接将移除地方的节点删除掉,移入地方添加新的节点,而不是进行移动。这样只需进行一次比较。这样就将复杂度降低为O(n),但不建议跨层移动。
    (3)不同组件:
            react是基于组件的,同组件比较用虚拟DOM,不同组件直接删除掉,重新渲染。当出现如下情况是,跨层级,react自动认为不是同一个组建,删点重构所有子组件。如下图,直接把D及其子节点,换成G及其子节点。
           下图的D和G虽然结构相似,但是react断定不是同一类型的组件,虽然这样很耗费性能,但这种情况在react里很少踹出现。
     
     
     如果还不明白,可以看看这篇随笔:https://www.cnblogs.com/wzndkj/p/10520697.html
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    less @import and extend及mixin详解
    Less的guards and argument matching
    LESS嵌套中的Mixins和classes
    bootstrap colorscheme以及theme自动生成
    C# Winform 获得下拉框 选中的值
    C# 后台按键 视频播放器 全屏后无法 触发
    C# 调用win32API 获取进程句柄 有毛用???
    C# 键盘钩子
    C# SqlParameter 使用
    C# 获得星期几
  • 原文地址:https://www.cnblogs.com/kaiqinzhang/p/10018587.html
Copyright © 2011-2022 走看看