其实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. Python TensorFlow深度学习回归代码：DNNRegressor

      本文介绍基于Python语言中TensorFlow的tf.estimator接口,实现深度学习神经网络回归的具体方法. 目录 1 写在前面 2 代码分解介绍 2.1 准备工作 2.2 参数配置 2 ...

  2. 2023计算机领域顶会(A类)以及ACL 2023自然语言处理（NLP）研究子方向领域汇总

    2023年的计算语言学协会年会(ACL 2023)共包含26个领域,代表着当前前计算语言学和自然语言处理研究的不同方面.每个领域都有一组相关联的关键字来描述其潜在的子领域, 这些子领域并非排他性的,它 ...

  3. MySQL软件安装教程（windows系统）

    目录 一.访问官网下载安装包 1.访问官网 2.点击DOWNLOADS 3.下拉页面,点击MySQL Community (GPL) Downloads » 4.接着点击MySQL Community ...

  4. Python风格规范(转载)

    Python风格规范(转载) https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python ...

  5. Nacos入门

    1.介绍 ①概要 官网:home (nacos.io) Nacos:Dynamic Naming and Configuration Service(动态命名和配置服务) 你可以看为:Eureka(注 ...

  6. STM32F4寄存器初始化系列：三重ADC——DMA

    static void ADC_Init(void) { /********************DMA配置**************************/ DMA2_Stream0-> ...

  7. 1.初识 Django

    设计模式 定义 # mysite/news/models.py from django.db import models class Reporter(models.Model): full_name ...

  8. day13-自定义拦截器

    自定义拦截器 1.什么是拦截器 说明: 拦截器与过滤器的区别 SpringMVC 的拦截器(Interceptor)与 Java Servlet 的过滤器(Filter)类似,它主要用于拦截用户的请求 ...

  9. 【TS】class类和接口

    class可以用来做数据的存储与回显,能将页面的数据分离出来并提取到class内,函数也可以抽离到class,实例化class进行调用.ts中的class类与js的class类基本相同,不同点在于ts ...

  10. LC761.特殊的二进制序列

    import org.junit.jupiter.api.Test;import java.util.ArrayList;import java.util.Collections;import jav ...