其实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. IDEA必备插件、阿里巴巴规范插件（代码格式化，注释模板化）的安装及使用和快捷键设置

    背景:记录下idea的配置,换电脑方便直接配置这些信息 第一步:安装必备插件如下 英文直接翻译就是插件的作用,大部分不用额外配置,Adapter for Eclipse Code Formatter是 ...

  2. 【总结笔记】全志平台 Linux ASOC 框架浅析

    ASOC 各部分框图示意 Platform 一般由 SOC 芯片原厂负责编写,主要涉及到 SOC 内部数字音频接口DAI(I2S)和 DMA 的寄存器配置. Codec 一般由硬件方案的驱动工程师或者 ...

  3. Spring AOP与AspectJ的对比及应用

    1 简介 AOP,即面向切面编程是很常用的技术,特别是在Java Web开发中.而最流行的AOP框架分别是Spring AOP和AspectJ. 2 Spring AOP vs AspectJ Spr ...

  4. 11月15日内容总结——软件开发架构、网络编程介绍和OSI七层协议介绍

    目录 一.软件开发架构 1.什么是软件开发架构 2.软件开发架构 架构方式一:c/s架构 架构方式二:b/s架构 架构优劣势 二.架构总结 三.网络编程前戏 1.什么是网络编程 2.学习网络编程的目的 ...

  5. MySQL 如何实现表的创建、复制、修改与删除

    MySQL中如何利用代码完成表的创建.复制.修改和删除?下面总结了在创建表的时候各字段的含义以及注意哪些问题,复制和修改及删除常用的代码. 一.创建表 --创建新表,如果存在则覆盖 drop tabl ...

  6. Python函数式编程之map/filter/reduce/sorted

    Python函数式编程之map/filter/reduce/sorted 关于函数式编程 函数式编程Functional Programming,其思想更接近数学计算 函数式编程就是一种抽象程度很高的 ...

  7. Djanngo-bbs项目

    1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...

  8. .net 字符串逗号隔开去重

    1.本文背景 同时输入/选择多条信息或批量输入/选择多条信息形成一个逗号隔开的字符串集,会出现数据重复的错误情况,产生不必要的脏数据,本文依次收集测试几种有效的去重方法. 2.代码实现 1)方法一:L ...

  9. FTP客户端c代码功能实现

    现在市面上有很多免费的FTP软件:如FileZilla ,那如果想自己在代码中实现与ftp服务器的上传下载文件该如何实现那? 本质上ftp协议就是TCP基础上建立的一种协议,具体如下. FTP 概述 ...

  10. JZOJ 3737. 【NOI2014模拟7.11】挖宝藏

    \(\text{Solution}\) 当 \(h=1\) 时显然是斯坦纳树板子,最方案必然是树形的 \(h > 1\) 时,考虑在每一层新建一个状态表示上一层宝藏全部挖完到这层某个点的答案 同 ...