diff算法(核心)
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算法(核心)的更多相关文章
- 【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...
- 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。
为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...
- 详解vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- 浅析vue2.0的diff算法
一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...
- Virtual DOM 系列三:Diff算法
DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...
- vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- react虚拟dom diff算法
react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...
- 解析vue2.0的diff算法 虚拟DOM介绍
react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...
- 理解Vue 2.5的Diff算法
DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...
随机推荐
- ARGB色彩模式
看到#ff ff ff 00 00这种 就是啦 .开头两位表示透明度.
- Android中微信抢红包插件原理解析和开发实现
一.前言 自从去年中微信添加抢红包的功能,微信的电商之旅算是正式开始正式火爆起来.但是作为Android开发者来说,我们在抢红包的同时意识到了很多问题,就是手动去抢红包的速度慢了,当然这些有很多原因导 ...
- router登录逻辑实现页面跳转
main.js文件中router.beforeEach((to, from, next) => { NProgress.start() const token = localStorage.ge ...
- Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)
题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...
- BUUCTF | [HCTF 2018]admin
首先爬一遍整个网站,发现有没注册的时候有“login”,"register",这两个页面,注册一个123用户登录后发现有 "index“,”post“,”logout“, ...
- 2018-2019-2 《Java程序设计》第10周学习总结
20175319 2018-2019-2 <Java程序设计>第10周学习总结 教材学习内容总结 本周学习<Java程序设计>第十二章java多线程机制: - 进程与线程 程序 ...
- VS2010提示error TRK0002: Failed to execute command
转自VC错误:http://www.vcerror.com/?p=277 问题描述: windows8自动更新Microsoft .NET Framework 3.5和4.5.1安全更新程序,今天用V ...
- docker 应用
在ubuntu安装docker 编写Dockerfile (用来操作容器) FROM java:8 #获取java官方镜像 jdk版本为1.8 VOLUME /tmp # 数据存储目录,容器退出后数据 ...
- Django--Aadmin入门
- 简单DP入门(二) 最长上升子序列及其优化
最长上升子序列解决问题: 有N个数,求出它最长的上升子序列并输出长度. 在题里不会讲的这么直白,这个算法往往会与其他的算法混在一起使用. 在这篇文章中不会出现其他的例题,为了让大家更好的理解,我只会对 ...