zoukankan      html  css  js  c++  java
  • react 局部更新的关键算法 DOM diff算法

    下图是diff算法结构的详细解析:

     要点总结:DIFF算法在执行时有三个维度,分别是Tree DIFF、Component DIFF和Element DIFF,执行时按顺序依次执行,它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。

    下图详解:

    Tree DIFF是对树的每一层进行遍历,如果某组件不存在了,则会直接销毁。如图所示,左边是旧属,右边是新属,第一层是R组件,一模一样,不会发生变化;第二层进入Component DIFF,同一类型组件继续比较下去,发现A组件没有,所以直接删掉A、B、C组件;继续第三层,重新创建A、B、C组件。

    下图详解:如图所示,第一层遍历完,进行第二层遍历时,D和G组件是不同类型的组件,不同类型组件直接进行替换,将D删掉,再将G重建。

    下图详解: Element DIFF紧接着以上统一类型组件继续比较下去,常见类型就是列表。同一个列表由旧变新有三种行为,插入、移动和删除,它的比较策略是对于每一个列表指定key,先将所有列表遍历一遍,确定要新增和删除的,再确定需要移动的。如图所示,第一步将D删掉,第二步增加E,再次执行时A和B只需要移动位置即可。

  • 相关阅读:
    添加unique约束
    设置自增列的步长和起始值
    创建外键及主键
    绘制折线图和叠加区域图
    绘制饼图
    生成叠加柱状图和水平柱状图
    随机生成带有颜色的验证码
    os模块与操作系统的交互
    TDate赋值给Variant时注意的问题
    线程中的异常处理
  • 原文地址:https://www.cnblogs.com/nimon-hugo/p/12660305.html
Copyright © 2011-2022 走看看