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所对应的

  • 相关阅读:
    python 去除字符串两端字符串
    python 找到列表中满足某些条件的元素
    python join函数
    Ambiguous mapping. Cannot map "***Controller" been method解决办法
    uflo2安装与配置
    uflo2概述
    Mybatis-plus中的常用注解
    Spring Cloud Eureka配置文件详解 (还没细看)
    idea安装lombok
    PowerDesigner最基础的使用方法入门学习(一)
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14447733.html
Copyright © 2011-2022 走看看