虚拟DOM与DOM diff算法
虚拟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"/>!
<span>It is {this.state.date.toTimeString()}</span>
</p>
)
}
}
ReactDOM.render(<HelloWorld/>, document.getElementById('example'))
</script>
</body>
</html>
虚拟DOM与DOM diff算法的更多相关文章
- React之虚拟DOM中的Diff算法
一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...
- react虚拟dom diff算法
react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...
- 解析vue2.0的diff算法 虚拟DOM介绍
react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...
- 探究虚拟dom与diff算法
一.虚拟DOM (1)什么是虚拟DOM? vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息,如下图: 可见左边的DOM结构,不论是标签名 ...
- ReactiveNative学习之Diff算法
React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...
- react渲染和diff算法
1.生成虚拟dom createElement的作用就是生成虚拟dom.虚拟dom到底是个啥,其实它就是个javascript对象~,这个对象的属性有props,vType,type, 而props也 ...
- diff算法深入一下？
文章转自豆皮范儿-diff算法深入一下 一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch ...
- 详解vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
- 详解vue的diff算法原理
我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时,vue ...
随机推荐
- windows7安装flask-mysqldb遇到的坑
最近在windows环境上搭建flask使用环境,遇到过很多坑,这次就记录下安装flask-mysqldb所遇到的坑. 正常逻辑是使用pip install flask-mysqldb进行安装.但是会 ...
- 牛刀小试MySQL--innodb_flush_log_at_trx_commit小结
参数名:innodb_flush_log_at_trx_commit 参数值: 0 事务提交的时候,不会去刷日志缓存区,也不会立马写入至日志文件中.这种设置最危险.如果数据库挂了且运气不好,数据库的最 ...
- IdentityServer4 中文文档 -7- （简介）贡献
IdentityServer4 中文文档 -7- (简介)贡献 原文:http://docs.identityserver.io/en/release/intro/contributing.html ...
- struts2、hibernate以及spring是如何配置的
第一次使用这3大框架进行网站编写的人没有一个清楚的流程,建起网站来会比较头疼,今天来讲讲3大框架的配置 基本流程: 用户点击页面之后,服务器收到一个请求,请求经过web.xml的拦截器过滤后进入act ...
- Ado.net怎么执行存储过程?
与ADO.Net执行SQL语句的地方只有两点不同1.使用存储过程名代替sql语句2. 使用查询对象SqlCommand,需配置一个CommandType属性 存储过程的执行语法-> exec 存 ...
- 浅谈websocket和c# socket（新手篇）
周末放假没带电脑所以今天分享质量不高,手机没有那些样式看起来可能没有那么方便,今天主要分享一下websocket. (赶紧拿小本本记下来) websocket 你发现是一个组合单词web socket ...
- 远程登陆Linux服务器
Xshell 强大的ssh客户端,通过互联网到远程主机.下载:http://www.netsarang.com/download/down_form.html?code=622 1.安装完,新建会话 ...
- Mybatis 与hibernate
共同点 (1)Hibernate与MyBatis都是通过SessionFactoryBuider由XML配置文件生成SessionFactory,由SessionFactory 生成Session,由 ...
- linux学习笔记-安装配置使用clamav杀毒软件
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 1.安装clamav 2.更新病毒库 # freshclam 如果更新不了,或者更新特别慢,可以手动下载病毒库文件,放到/var ...
- lfs（systemv版本）学习笔记-第2页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemv)学习笔记-第1页 的地址:https://www.cnblogs.com/renren-study-no ...