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

  • 相关阅读:
    项目中常用的图片处理方案小结
    Unity2D实现人物三连击
    使用mescroll实现上拉加载与下拉刷新
    iOS中文输入法多次触发的问题及解决方案
    使用WebStorm将项目部署到IIS
    在Less中使用条件判断
    Vue+原生App混合开发手记#1
    在Vue中使用layer.js弹出层插件
    局域网简单的SVN服务器的搭建
    在iOS中实现sticky header
  • 原文地址:https://www.cnblogs.com/silent-cat/p/14447733.html
Copyright © 2011-2022 走看看