其实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. JSP第七次作业

    1.做一个图书类Book id,name,price ,get,set访问器,构造方法2个,1个无参,1个有参做一个测试类,在main中创建3个图书对象,放到list集合中.做一个菜单,可以添加,删除 ...

  2. 浅谈Pytest中的warning处理

    浅谈Pytest中的warning处理 没有处理warning 我们写一个简单的测试 import pytest def test_demo(): import warnings warnings.w ...

  3. 日志添加request-id

    package com.xf.config; import java.util.Date; import javax.servlet.http.HttpServletRequest; import j ...

  4. 不花钱几分钟让你的站点也支持https

    前言 现在,免费SSL证书已经很普遍了,但是,申请和配置SSL证书仍然是一件较为繁琐的事,修改web服务配置在所难免,且不同的web服务配置方法不一样,不具备通用性.本文介绍一种通用的快速配置方法,w ...

  5. ECharts 提示框组件Tooltip属性大全（包含文本注释）

    tooltip: { // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip.polar.tooltip.single.tooltip),可以设置在系列中(s ...

  6. 学习Java Day4

    今天重点学习了读取输入,然后在eclipse上试了很多次,存在一些还没能解决的问题,发现eclipse的使用十分不熟练, 明天重点学习一下如何使用eclipse.

  7. yaml进阶用法

    我们知道 json 是 yaml 的子集,作为超集的 yaml,必然有着很多与 json 不一样的特性,比如定义变量.引用.拼接等,下面来看看吧~ 为了方便和python的字典快速对比,我们直接使用y ...

  8. php中 mysql 中文乱码解决办法

     首先要保证是utf-8编码或者支持中文的编码 2.Windows下修改方法 MySQL安装目录下的my-default.ini改为my.ini文件 [client]节点 default-charac ...

  9. 代码随想录算法训练营day07 | leetcode 454.四数相加II 383. 赎金信 15. 三数之和 18. 四数之和

    LeetCode 454.四数相加II 分析1.0 这个最直接暴力法,不过过于暴力了,害怕.jpg 失误 读题理解失误:题目要求的是四元组的个数,读完题到我这里成了输出四元组,悲哉 分析2.0 记录有 ...

  10. 基于C++的OpenGL 02 之着色器

    1. 概述 本文基于C++语言,描述OpenGL的着色器 环境搭建以及绘制流程可参考: 基于C++的OpenGL 01 之Hello Triangle - 当时明月在曾照彩云归 - 博客园 (cnbl ...