大致流程
var vnode = {
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [{
    tag: 'li',
    attrs: {
      className: 'item'
    },
    children: ['item 1']
  },{
    tag: 'li',
    attrs: {
      className: 'item'
    },
    children: ['item 2']
  }]
}
function createElement(vnode){
  var tag = vnode.tag;
  var attrs = vnode.attrs || {};
  var children = vnode.children || [];
  if (tag == null) {
    return null;
  }   // 创建真实的 dom 元素
  var elem = document.createElement(tag);
  // 属性
  var attrName;
  for (attrName in attrs) {
    if(attrs.hasOwnProperty(attrName)){
      elem.setAttribute(attrName, attrs[attrName]);
    }
  }
  // 子元素
  children.forEach(function(childVnode){
    elem.appendChild(childElem(childVnode)) // 递归
  });   // 返回真实的 dom 元素
  return elem;
}

就是将对象一一转化成dom

上面是patch的第一个参数没有内容的时候,如果有内容就会做对比。
var vnode = {
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [{
    tag: 'li',
    attrs: {
      className: 'item'
    },
    children: ['item 1']
  },{
    tag: 'li',
    attrs: {
      className: 'item'
    },
    children: ['item 2']
  }]
} var newVnode = {
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [{
    tag: 'li',
    attrs: {
      className: 'item'
    },
    children: ['item 1']
  },{
    tag: 'li',
    attrs: {
      className: 'item'
    },
  children: ['item b']
  }]
} function updateChildren(vnode ,newVnode){
  var children = vnode.children || [];
  var newChildren = newVnode.children || [];   children.forEach(function(childrenVnode, index){
    var newChildrenVnode = newChildren[index];
    if(childrenVnode.tag === newChildrenVnode.tag){
      // 深层次对比,递归
      updateChildren(childrenVnode, newChildrenVnode);
    } else {
      // 替换
      replaceNode(childrenVnode, newChildrenVnode);
    }
  });
} function replaceNode(vnode, newVnode){
  var elem = vnode.elem; // 真实的 dom
  var newElem = newVnode.elem;   // 替换
}

没法知道有多少层,就必须用递归

diff算法实现的更多相关文章

  1. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  2. React Diff算法

    Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化.在React中,构建UI界面的思路是由当前状态决定界面.前后两个状态就对应两套界面,然后由React来比较 ...

  3. React的Diff算法

    使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊.毕竟"知其然,知其所以然"这句老话从远古喊到现代了. 以下内容基本是官网文章的一个总结.压缩.这次要谦虚 ...

  4. ReactiveNative学习之Diff算法

    React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...

  5. Vue源码终笔-VNode更新与diff算法初探

    写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...

  6. React——diff算法

    react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体 ...

  7. 详解vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  8. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  9. Virtual DOM 系列三:Diff算法

    DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...

  10. 虚拟DOM和react中的diff算法总结

    https://blog.csdn.net/qq_26708777/article/details/78107577 一.虚拟DOM 1.什么是虚拟DOM及原理        把真实DOM树,变成js ...

随机推荐

  1. Python 常用包收集

    转自:http://www.cnblogs.com/Logic0/archive/2010/09/03/1850382.html 常用的自带类库 常用的外部类库       Tkinter———— P ...

  2. 《Mysql - Mysql 是如何保证主备一致的?》

    一:Mysql 主备的基本原理? - 主备切换流程(M-S 架构) -  - 在状态 1 中,客户端的读写都直接访问节点 A,而节点 B 是 A 的备库,只是将 A 的更新都同步过来,到本地执行. - ...

  3. java实现邮箱发送邮件功能

    邮箱验证是一个很常见的功能了,基本上每个网站都会用的到,java也有专门的jar来处理邮件发送等服务,这里只是简单的实现一下发送邮件的功能,具体jar包就不再提供了,我会把所有需要引用的包都贴出来,方 ...

  4. MySQL常用的系统函数

    MySQL常用的系统函数 2019年01月17日 17:49:14 pan_junbiao 阅读数 155    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  5. Eureka 源码分析

    启动server服务,或者发现服务都使用了@EnableDiscoveryClient注解和eureka.instance.client.service-url.defaultZone /** * A ...

  6. (4)Spring Boot Web开发---静态资源

    文章目录 对静态资源的映射规则 模板引擎 Thymeleaf 使用 & 语法 使用之前将的快速创建项目的方法,勾选我们需要的场景,这里我需要 web --> web.sql --> ...

  7. Python函数基础学习(定义、函数参数、递归函数)

    1.本程序是测试函数的基础.函数的参数.递归函数的测试. 函数的参数有: 必选参数.默认参数.可变参数.命名关键字参数和关键字参数 #!/usr/bin/python # -*- coding: ut ...

  8. C++语法笔记(上)

    客观事物中任何一个事物都可以看成一个对象,对象是由一组属性和一组行为构成的. c++中,每个对象都是由数据与函数这两部分构成,数据就是对象的属性,函数就是对象的行为. c++中对象的类型称为类,类是一 ...

  9. Scratch编程:游来游去的鱼(二)

    “ Scratch编程学习环境搭建好了吗?让我们一起来进行游戏吧!” 01 — 游戏介绍 这是一款简单的小游戏,实现了一条小鱼在池塘里游来游去. 02 — 设计思路 1,这个游戏主要由一个池塘背景和一 ...

  10. SAS学习笔记54 RTF文件格式

    Style RTF Control Word Example Code Italicize \i title '\i italicized title'; Underline \ul title '\ ...