zoukankan      html  css  js  c++  java
  • 虚拟DOM

    虚拟DOM

    概念:真实DOM树的抽象,本质是一个js对象,包含tag,props以及children属性

    优点

    1.减少DOM操作次数。将多次操作合并为一次操作。比如向页面上添加1000个节点,需要操作1000次。而虚拟DOM只需操作一次
    2.减少DOM操作范围。
    3.跨平台。因为虚拟DOM本质是一个js对象

    缺点

    需要额外创建函数,如createElement或h

    diff算法

    1.将两颗树逐层对比,找出需要更新的节点
    2.先看标签名(tag)。标签名不同直接替换
    3.再看属性(props)。属性不同直接替换
    4.再往下找children,先看标签,再看属性,以此类推

    diff算法中的key

    在虚拟DOM中,模拟的是真实的树,假设在一个节点上由三个子结点A,B,C。用索引index当作key
    1.删掉了B(index=1),此时留下的是A(index=0),C(index=2)
    2.因为0、1、2在真实DOM中是一个伪数组。此时删掉了一个元素数组长度由3减小到2,最大索引由2变成了1
    3.最终剩下的节点就是index为0和1的节点,最终剩下的就是A(index=0)和B(index=0)
    4.本来打算删除B,但是把index当作key,由于index是变化的,而每个key与节点又是一一对应的
    diff算法中的key是节点的唯一标识,每个节点都有自己的标识,key不要使用index,因为index是会变化的,我们需要保持key值与节点一一对应
    一句话总结:最终剩下的key是啥,剩下的节点就是剩下的key所对应的

  • 相关阅读:
    nioSocket
    Socket
    常见协议和标准
    Object类clone方法
    java中的运算符
    java中方法的定义
    Spring中实现定时调度
    Spring中对资源的读取支持
    HashMap的实现原理
    固定Realm 与配置数据库连接实现登录验证
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14447733.html
Copyright © 2011-2022 走看看