zoukankan      html  css  js  c++  java
  • Vue和React中的diff算法核心

    虚拟DOM

    • js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM
    • 声明的样子file
    • 输出的样子file

    实现render函数生成真实DOM

    • 设置属性file
    • render函数file
    • 渲染函数file

    diff算法

    • diff算法其实就是对DOM进行different比较不同的一种算法(虚拟的比较更节约性能)
      __ 补丁:用来更新DOM的任务__

    比较原则

    • 平级对比
      • file
    • 不跨级对比(无A__删除__A)file
    • 同级复用
      • file

    遍历规则

    • 先序深度优先遍历(从根节点向下级子节点遍历)
      • file
      • 125叫广度优先
      • 12345深度优先

    实现diff函数

    • 比较思路规则
        1. type相同,比较属性,属性不同生成补丁包patch{type:'ATTRS',attrs:{class:'xx'} }
        2. 新节点在原DOM中不存在{type:'REMOVE',index:xxx}
        3. 节点类型不同,直接替换{type:'REPLACE',newNode:xxx}
        4. 文本变化{type:'TEXT',text:'xxx'}
  • 相关阅读:
    mysql
    Spring MVC
    springSecurity
    导出Excel报表
    Redis集群搭建
    Oracle 分析数据库表行长度的统计信息 使用聚簇的步骤
    Dbms.job 学习
    oracel 学习系列
    Oracle 工具类 Sql 分析索引的 碎片率
    oracl
  • 原文地址:https://www.cnblogs.com/qidaoxueyuan/p/12461581.html
Copyright © 2011-2022 走看看