其实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. NodeJS 实战系列：DevOps 尚未解决的问题

    本文将通过展示 NodeJS 应用里环境变量的提取过程,来一窥 DevOps 技术是如何应用在现在云平台上的运维工作中的.同时我也想让大家在这里看到 DevOps 的另外一面,即它并非全能,从本地开发 ...

  2. Vue 24 props

    1 简介 props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配置项 2 一个简单示例 1)StudentComp.vue <template ...

  3. Idea创建类模板方法模板

    参考https://blog.csdn.net/sdut406/article/details/81750858 写代码是少不了注释的,但是自带的注释就几个,所以使用注释模板添加自定义的注释是个非常好 ...

  4. 计算机网络基础07 DNS概述

    1 什么是DNS Domain Name System(域名系统),它是一个应用层的服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.当前,对于每一级域名长度的限制是 ...

  5. Redis（安装、启动、测试、环境）

    Redis 概述: Redis(Remote Dictionary Server ),即远程字典服务,是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数 ...

  6. 微信小程序wxs封装使用以及公共js组件封装

    wxs封装 wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{ xxx.xxx() }}调用wxs的函数 <view> <view>第{{m1.getMax(1 ...

  7. 【雅礼联考DAY02】Revolution

    #include<cstdio> #include<queue> using namespace std; const int N = 210 , M = 210000 , I ...

  8. Spark系列 - (3) Spark SQL

    3. Spark SQL 3.1 Hive.Shark和Sparksql Hive:Hadoop刚开始出来的时候,使用的是hadoop自带的分布式计算系统 MapReduce,但是MapReduce的 ...

  9. AHOI，但是初中组，2017-2018

    你觉得我这种彩笔像是能去做省选题的样子吗?=w= 合肥人,做初中的屑安徽题,很正常吧.AH 也不知道为啥搞啥市赛啊区赛啊省赛啊就挺离谱的反正摆烂人也不想打┓( ´∀` )┏ 2018 T1 签到题 / ...

  10. 题解 P2602 [ZJOI2010] 数字计数

    虽然说是数位 dp 入门题但是还是不是很会(悲 看了题解才做出来,中途因为各种 SB 问题调了很长时间(悲 聪明的你一定能看出来这是数位 dp,因此令 \(i\) 为当前填的位数,\(limit\) ...