ps:大致转载知乎文章

vue和react的虚拟dom都采用类似的diff算法,核心大概可以归为两点

1,两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构;

2,同一层级的一组节点,他们可以通过唯一的id进行区分。

基于以上两点假设,是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。

当页面的数据发上变化的时候,Diff算法只会比较同一层级的节点:

如果节点类型不同,直接干掉前面的节点,在创建并插入新的节点,不会再比较这个节点以后的子节点了。

如果节点类型相同,则会重新设置节点的属性,从而实现节点的更新。

当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上的原则。

如下例子:

我们希望在B和C之间加一个F,Diff算法默认执行起来是这样的

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一的标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

所以一句话,key的作用就是为了搞笑的更新虚拟DOM。另外vue中在使用相同标签名元素的过度切换时,

也会使用到key属性,其目的也是为了让vue可以区分他们,否则vue只会替换其内部属性而不触发过渡效果。

ps:key最好不要用index,用单一的唯一的标记

diff算法(核心)的更多相关文章

  1. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  2. 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  3. 详解vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  4. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  5. Virtual DOM 系列三:Diff算法

    DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...

  6. vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  7. react虚拟dom diff算法

    react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...

  8. 解析vue2.0的diff算法 虚拟DOM介绍

    react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...

  9. 理解Vue 2.5的Diff算法

    DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...

随机推荐

  1. loj2542 「PKUWC2018」随机游走 MinMax 容斥+树上高斯消元+状压 DP

    题目传送门 https://loj.ac/problem/2542 题解 肯定一眼 MinMax 容斥吧. 然后问题就转化为,给定一个集合 \(S\),问期望情况下多少步可以走到 \(S\) 中的点. ...

  2. BZOJ2097 [Usaco2010 Dec]Exercise 奶牛健美操 贪心

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=2097 题解 显然二分一个 \(mid\) 表示每一块的直径长度的最大值,求最少需要多少连通块. ...

  3. AGC020C Median Sum

    高端操作qaq 又双叒叕读错题了= = 然后重新读题发现不会做了 于是瞅了一波题解 我靠要不要这么暴力呜呜呜 直接bitset O(n^3/w)QAQ 就是f[i]表示i是否能被搞出来 然后我们先不看 ...

  4. Python"sorted()"和".sort()"的区别

    sorted(A-LIST)会返回一个新的object,不改变**A-LIST*本身. A-LIST.sort()会直接改变A-List,不产生新的object.

  5. 专为渗透测试人员设计的 Python 工具大合集

    如果你对漏洞挖掘.逆向工程分析或渗透测试感兴趣的话,我第一个要推荐给你的就是Python编程语言.Python不仅语法简单上手容易,而且它还有大量功能强大的库和程序可供我们使用.在这篇文章中,我们会给 ...

  6. window安装nexus和配置

    原文 http://www.cnblogs.com/fxmemory/p/7133672.html 一. 认识mav仓库 1.1 maven仓库的作用   回想之前不用maven的时候,我们用ecli ...

  7. 转载:IDEA配置SVN及使用

    转自:https://blog.csdn.net/zwj1030711290/article/details/80687365 1.安装svn客户端 之前用myEcplise只需要插件,现在IDEA需 ...

  8. (转)Docker network命令

    转:https://blog.csdn.net/gezhonglei2007/article/details/51627821 原文地址:https://docs.docker.com/engine/ ...

  9. python生成接口自动化测试报告模版

    1:准备html模版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  10. 关系型数据库MySQL(二)_索引

    优点 大大加快数据的查询速度 创建唯一性索引,保证数据库表中每一行数据的唯一性 在使用分组和排序子句进行数据检索时,可以显著减少查询中分组和排序的时间 缺点 索引需要占物理空间 当对表中的数据进行增删 ...