react的Virtual DOM
一、Virtual DOM
Virtual DOM是一个JavaScript对象,v8引擎使得js可以高效运行,而直接操作DOM很慢。
Virtual DOM本质上就是在JS和DOM之间做了一个缓存。可以类比CPU和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存;既然DOM这么慢,我们就在JS和DOM之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。
二、Virtual DOM算法
Virtual DOM算法主要做3件事:
1、用js对象模拟dom树生成Virtual DOM树,把真正的dom树插入文档;
2、状态变更时,重新构造一个对象树,对比新旧两棵树、记录差异;
3、把记录的差异应用在真正的dom树上,更新视图。
其中,对比两棵树的差异,即Virtual DOM的diff算法,一旦数据变化,针对性的对局部视图做调整,而不是变更整个dom树。两棵树的完全diff算法时间复杂度为n的3次方,O(n^3),一般情况下是O(n),因为Virtual DOM只比较同级节点,记录差异,采用深度优先遍历。
三、组件性能优化
react组件性能优化,每次setState方法的调用都会重绘整个子树。如果你想优化性能,那么尽量在较“低”的节点上调用setState方法,或者自己实现shouldComponentUpdate方法来阻止整个子树的重绘。
四、参考链接
http://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html
http://www.w3cplus.com/javascript/Virtual-DOM-diff.html
https://hulufei.gitbooks.io/react-tutorial/content/index.html
http://www.jianshu.com/p/83bda9cd8c67
https://github.com/facebook/react
五、虚拟dom和createDocumentFragment的区别
都是把多次DOM操作做一个批处理,只是前者建立在创建元素节点上,容易修改。后者建立一个片段,就是一次性使用,不方便修改。
react的Virtual DOM的更多相关文章
- 深入理解 React 的 Virtual DOM
React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...
- React的Virtual DOM厉害了
React 的伟大之处就在于,提出了Virtual DOM这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发. 在性能方面,由于用到了Virtual D ...
- React:关于虚拟DOM(Virtual DOM)
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...
- React Virtual DOM Explained in Simple English
If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
- 个人对于Virtual DOM的一些理解
之前一直认为react的Virtual DOM操作会比传统的操作DOM要快,这其实是错误的,React 从来没有说过 "React 比原生操作 DOM 快".如果没有 Virtua ...
- 【转】Virtual DOM
前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...
- 【vue系列】Virtual DOM 真的比操作原生 DOM 快吗?
一.前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重 ...
- 如何理解Virtual DOM
什么是虚拟DOM 接下来用vdom(Virtual DOM)来简称为虚拟DOM. 指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做.换而言之,虚拟DOM就是JS对象.如下DOM结构: & ...
随机推荐
- Codeforces 1077D Cutting Out(二分答案)
题目链接:Cutting Out 题意:给定一个n长度的数字序列s,要求得到一个k长度的数字序列t,每次从s序列中删掉完整的序列t,求出能删次数最多的那个数字序列t. 题解:数字序列s先转换成不重复的 ...
- COGS 2396 2397 [HZOI 2015]有标号的强连通图计数
题意:求n个点有向图其中SCC是一个的方案数 考虑求出若干个不连通的每个连通块都是SCC方案数然后再怎么做一做.(但是这里不能用Ln,因为推不出来) 设$f_n$为答案, $g_n$为n个点的有向图, ...
- ansible基本使用方法
一.ansible的运行流程 ansible是基于ssh模块的软件,所以主控端和被控端的ssh服务必须正常才能保证ansbile软件的可用性. 检查ssh服务是否正常: systemctl sta ...
- Vue(小案例_vue+axios仿手机app)_上拉加载
---恢复内容开始--- 一.前言 ...
- Django-ContentType的使用
一.神器ContentType 如果 继续增加课程 价格策略表还得增加字段 这样django自带一个contentType 帮助我们解决表之间的依赖关系: 1.从settings文件可以看到原生就支持 ...
- pymysql的使用及sql注入
pymysql简介 pymysql是python操纵mysql的一个模块,本质上是一个socket客户端 pymysql使用 准备数据 #创建数据库db2,如果已存在,请忽略 CREATE DATAB ...
- ERROR [main] master.HMasterCommandLine Master exiting
2018-05-18 07:07:26,257 INFO [main-SendThread(localhost:2181)] zookeeper.ClientCnxn: Opening socket ...
- EasyUI datagrid 的多条件查询
<script type="text/javascript"> $(function () { $("#dg" ...
- JSON 之 SuperObject(11): TSuperTableString、TSuperAvlEntry
JSON 之 SuperObject(11): TSuperTableString.TSuperAvlEntry - 万一 - 博客园http://www.cnblogs.com/del/archiv ...
- CapsNet胶囊网络(理解)
0 - 背景 Geoffrey Hinton是深度学习的开创者之一,反向传播等神经网络经典算法发明人,他在去年年底和他的团队发表了两篇论文,介绍了一种全新的神经网络,这种网络基于一种称为胶囊(caps ...