虚拟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 ...
随机推荐
- 如何查看oracle用户具有的权限和角色
.查看所有用户: select * from dba_users; select * from all_users; select * from user_users; .查看用户或角色系统权限(直接 ...
- [转]nodejs之cordova 跨平台开发
本文转自:https://blog.csdn.net/bubuxindong/article/details/53787392 cordova原名phonegap,虽然adobe收购了phonegap ...
- java的四个基本特征
现实生活中的事物被抽象成对象,把具有相同属性和行为的对象被抽象成类,再从具有相同属性和行为的类中抽象出父类. 封装 隐藏对象的属性和实现细节,仅仅对外公开接口. 封装的有优点: 1.便于使用者正确.方 ...
- C# 函数式编程：LINQ
一直以来,我以为 LINQ 是专门用来对不同数据源进行查询的工具,直到我看了这篇十多年前的文章,才发现 LINQ 的功能远不止 Query.这篇文章的内容比较高级,主要写了用 C# 3.0 推出的 L ...
- hive 表类型
Hive表有受控表(内部表).外部表.分区表.桶表四种. 内部表,就是一般的表,前面讲到的表都是内布标,当表定义被删除的时候,表中的数据随之一并被删除. 外部表,数据存在与否和表的定义互不约束 ...
- Java学习笔记之——常用转义符号
\ 单独用会报错 \\ 打印右斜杠 \n 换行 \t Tab键 \" 双引号 \' 单引号
- X问题（中国剩余定理+不互质版应用）hdu1573
X问题 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Sybase SQL anywhere5.5
https://github.com/mono/old-code https://wiki.scn.sap.com/wiki/display/SQLANY/SQL+Anywhere+and+Micro ...
- 张钹院士：场景是当前AI产业化最大问题
张钹院士:场景是当前AI产业化最大问题 https://mp.weixin.qq.com/s/TLdoi9cnY-Crr0FVp2ah6g 在世界机器人大会“青年创新创业专题论坛”上,清华大学人工智能 ...
- Python 解决Python安装包时提示Unable to find vcvarsall.bat的问题
解决Python安装包时提示Unable to find vcvarsall.bat的问题 by:授客 QQ:1033553122 问题 Python安装包时,提示Unable to find v ...