虚拟DOM是什么?
一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)
虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应，如果只是更新虚拟DOM, 页面是不会重绘的

Virtual DOM 算法的基本步骤

用JS对象树表示DOM树的结构；然后用这个树构建一个真正的DOM树插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异，把差异应用到真实DOM树上，视图就更新了
可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

基本原理图

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_component</title>
</head>
<body>
<div id="example"></div>
<br>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*验证:虚拟DOM+DOM Diff算法: 最小化页面重绘*/

  class HelloWorld extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
          date: new Date()
      }
    }

    componentDidMount () {
      setInterval(() => {
        this.setState({
            date: new Date()
        })
      }, 1000)
    }

    render () {
      console.log('render()') // 这里render不断在执行更新date数据，但是input是不会更新的
      return (
        <p>
          Hello, <input type="text" placeholder="Your name here"/>!&nbsp;
          <span>It is {this.state.date.toTimeString()}</span>
        </p>
      )
    }
  }

  ReactDOM.render(<HelloWorld/>, document.getElementById('example'))
</script>
</body>
</html>

虚拟DOM与DOM diff算法的更多相关文章

  1. React之虚拟DOM中的Diff算法

    一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...

  2. react虚拟dom diff算法

    react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...

  3. 解析vue2.0的diff算法 虚拟DOM介绍

    react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...

  4. 探究虚拟dom与diff算法

    一.虚拟DOM (1)什么是虚拟DOM? vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息,如下图:   可见左边的DOM结构,不论是标签名 ...

  5. ReactiveNative学习之Diff算法

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

  6. react渲染和diff算法

    1.生成虚拟dom createElement的作用就是生成虚拟dom.虚拟dom到底是个啥,其实它就是个javascript对象~,这个对象的属性有props,vType,type, 而props也 ...

  7. diff算法深入一下？

    文章转自豆皮范儿-diff算法深入一下 一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch ...

  8. 详解vue的diff算法

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

  9. vue的diff算法

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

  10. 详解vue的diff算法原理

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

随机推荐

  1. ionic的学习-01搭建App的起步准备

    Part1  搭建App的起步准备(建立项目文件夹,配置开发环境) 第一步 初始化npm npm init 文件夹变化 第二步 使用npm安装git npm install git --save 文件 ...

  2. 西门子PLC SCL语言开发学习笔记（二）

    今天来讲下scl两个关键的点 一.按键事件 比如地址I0.0是某个按钮的状态,他只有True和False两个状态,所以我们要获得按下事件需要我们自己模拟. #KeyPress := "Btn ...

  3. 序列化（pickle，shelve，json，configparser）

    一,序列化 在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据结构,这个过程叫序列化,不同的序列化,结果也不同,但是目的是一样的,都是为了存储和传输. 在 ...

  4. python字典操作和内置方法

    一 字典基本介绍 python中只有字典是映射结构,通过key取值,并且key是不可变数据类型,而value可以是任意数据类型. 字典通过一个花括号,里面存放key:value的数据结构来定义.理论上 ...

  5. Oracle入门《Oracle介绍》第一章1-4 Oracle 用户管理

    1.Oracle 默认用户 只有用合法的用户帐号才能访问Oracle数据库 Oracle 有几个默认的数据库用户 数据库中所有数据字典表和视图都存储在 SYS 模式中.SYS用户主要用来维护系统信息和 ...

  6. [android] 图片的缩放

    界面布局,线性布局,竖直排列,两个ImageView 获取到两个ImageView对象 调用BitmapFactory.decodeResource(res,id)方法,获取Bitmap对象 参数:r ...

  7. 【Spring】30、Spring，SpringMVC用法汇总

    SpringMVC的工作原理图: springMVC中的几个组件: 前端控制器(DispatcherServlet):接收请求,响应结果,相当于电脑的CPU. 处理器映射器(HandlerMappin ...

  8. Error running tomcatUnable to open debugger port (127.0.0.1 50181) java.net.B

    1.把tomcat删除,重新建一个,tomcat就会重新自动使用一个端口了 2.自己手动调一下端口 我用的是第二种,手动调了下,最开始的端口是:50181,该成了50182,就可以了.

  9. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

  10. Ubuntu 16.04.4 LTS + Ambari 2.6.1.5 + HDP 2.6.4.0 安装部署

    服务器 主机名 master slave1 slave2 slave3 IP 192.168.1.40 192.168.1.41 192.168.1.42 192.168.1.43 离线包服务器: 1 ...