其实diff的核心在于两点：

比对(diff的运算过程)

修改(diff的返回结果，输出生成的patch并操作)

树的BFS(广度优先遍历)/DFS(深度优先遍历)，需要O(N)的时空复杂度

传统diff算法通过循环递归对节点进行依次对比效率低下，算法复杂度达到O(N^3)

传统diff算法追求（完全）比对和（最小）修改，而React、Vue则是放弃了完全及最小，只进行同级比较，才实现从O(N^3) => O(N)

vdom diff的更多相关文章

  1. vdom,diff,key 算法的了解

    <ul id='list'> <li class='item'>Item1</li> <li class='item'>Item2 </li> ...

  2. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

  3. 从零开始学虚拟DOM

    此文主要翻译自:Building a Simple Virtual DOM from Scratch,看原文的同学请直达! 此文是作者在一次现场编程演讲时现场所做的,有关演讲的相关资料我们也可以在原英 ...

  4. Vue 中 diff 算法后更新 DOM 的方法

    vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...

  5. 深入Vue2.x的虚拟DOM diff原理

    一.前言 Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章<剖析Vue原理&实现双向绑定MVVM>,vdom是树状结构,其节点为vnod ...

  6. 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  7. 理解Vue 2.5的Diff算法

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

  8. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  9. 个人对于React的Diff算法的一点疑问(待更新)

    本人对于Diff算法也并未做深入研究,只是大概的看过一些博文了解了些原理,但依然有了如下疑问 : 对于vdom所表示的对象中,若在该oldObj和newObj之间,发现一个元素节点所表示的子对象不见了 ...

  10. React Diff算法一览

    前言 diff算法一直是React系统最核心的部分,并且由于演化自传统diff,使得比较方式从O(n^3)降级到O(n),然后又改成了链表方式,可谓是变化万千. 传统Diff算法 传统diff算法需要 ...

随机推荐

  1. 【随笔记】FRAM 铁电随机存储器(MB85RC04VPNF)

    参考资料 器件规格书:https://atta.szlcsc.com/upload/public/pdf/source/20131104/1457706659695.pdf I2C总线规范:https ...

  2. vue3 | isRef、unref、toRef、toRefs

    isRef 检查某个值是否是ref.是返回true,否则返回false. const num = ref(10); const num1 = 20; const num2 = reactive({ d ...

  3. drf-day4——序列化类常用字段和字段参数、序列化类source用法、序列化类定制字段返回内容的两种方式、序列化类的多表关联反序列化保存、反序列化字段校验、ModelSerializer的使用

    目录 一.序列化类常用字段和字段参数(了解) 1.1 常用字段类 1.2 常用字段参数 选项参数: 通用参数: 重点 二.序列化高级用法之source(了解) 2.1 序列化定制字段名字 三.序列化高 ...

  4. VUE防止多次点击，重复请求

    1.添加自定义文件 preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventReCli ...

  5. Vue过滤案例、按键修饰符、数据双向绑定

    目录 Vue过滤案例.按键修饰符.数据双向绑定 一.v-for能循环的类型 二.js的几种循环方式 三.key值的解释 四.数组.对象的检测与更新 五.input的几个事件 六.事件修饰符 七.按键修 ...

  6. python爬虫学习——元组，字典（2.14日博客补）

    元组 ''' tup1 = () #创建一个空的元组 print(type(tup1)) #tup2 = (50) #不是元组,python把括号当成了表达式的一部分,即数学运算的括号 #tup2 = ...

  7. JavaScript 日期和时间的格式化

    一.日期和时间的格式化 1.原生方法 1.1.使用 toLocaleString 方法 Date 对象有一个 toLocaleString 方法,该方法可以根据本地时间和地区设置格式化日期时间.例如: ...

  8. 【译】.NET 7 中的性能改进（一）

    原文 | Stephen Toub 翻译 | 郑子铭 一年前,我发布了.NET 6 中的性能改进,紧接着是.NET 5..NET Core 3.0..NET Core 2.1和.NET Core 2. ...

  9. Docker中Mysql容器忘记密码的处理方法

    今天非常的倒霉,因为学习了Vue的相关知识,想自己写一个后端服务器来练习一下Vue 然后 忘记了Docker中Mysql的密码... 很抽象 下面是我的解决方法 一.如果在本地的Navicat Pre ...

  10. Hexo系列（二）：Hexo安装

    作者:独笔孤行 官网:​​ ​http://anyamaze.com​​ 公众号:云实战 1.安装nodejs和npm yum install epel-release -y yum install ...