大致流程
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. 13点睛Spring4.1-Spring EL

    13.1 Spring EL Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似jsp的EL表达式语言; 本教程关注于在注解中使用Spring EL; Spring EL ...

  2. 02点睛Spring4.1-Java Config

    转载:https://www.iteye.com/blog/wiselyman-2210376 2.1 java config spring的java config主要使用@Configuration ...

  3. 强制卸载 Visual studio 2017

    微软挖的坑,很是烦人.还好老外这篇文章亲测可行.懒得翻译了,权做笔记吧. 网址是:https://jessehouwing.net/visual-studio-2017-force-uninstall ...

  4. 一段话让你理解vuex的工作模式!

    vuex 个人理解:管理各组件公共状态的vue插件,也是个组件相互通信的插件. 组成:1.State:状态树. 2.Getters:操作state. 3.Mutation:唯一改变state状态的操作 ...

  5. Tensorflow-逻辑斯蒂回归

    1.交叉熵 逻辑斯蒂回归这个模型采用的是交叉熵,通俗点理解交叉熵 推荐一篇文章讲的很清楚: https://www.zhihu.com/question/41252833 因此,交叉熵越低,这个策略就 ...

  6. scrapy工具创建爬虫工程

    1.scrapy创建爬虫工程:scrapy startproject scrape_project_name >scrapy startproject books_scrapeNew Scrap ...

  7. Java常用命令:jps、jstack、jmap、jstat(带有实例教程)

      版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013310517/article/details/80990924 查看Java进程:jps ...

  8. Java中的事务及使用

    什么是事务? 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言(如S ...

  9. 通俗理解TCP的三次握手

    三次握手流程的本质,可以这么理解:TCP的三次握手其实是双方各一次握手,各一次确认,只是其中一次握手和确认合并在一起. 当然也可以更通俗的去理解: "喂,你听得到吗?" " ...

  10. RS232标准与TTL/COM小常识

    1.TTL电平标准 输出 L: <0.8V : H:>2.4V. 输入 L: <1.2V : H:>2.0V 2.CMOS电平标准 输出 L: <0.1*Vcc : H: ...