一、什么是虚拟DOM

虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。比如:

 var element = {
element: 'ul',
props: {
id:"ulist"
},
children: [
{ element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] },
{ element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] }
]
}

二、为什么使用虚拟DOM

在传统的 Web 应用中,我们往往会把数据的变化实时地更新到用户界面中,于是每次数据的微小变动都会引起 DOM 树的重新渲染。

虚拟DOM的目的是将所有操作累加起来,统计计算出所有的变化后,统一更新一次DOM。

三、虚拟DOM的原理

当Node节点的更新,虚拟DOM会比较两棵DOM树的区别,保证最小化的DOM操作,使得执行效率得到保证。

计算两棵树的常规算法是O(n^3)级别,所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。

React diff 算法

React 分别对 tree diff、component diff 以及 element diff 进行算法优化。

1、tree diff

DOM 节点跨层级的移动操作少到可以忽略不计,针对这一现象,

React 通过 updateDepth 对 Virtual DOM 树进行层级控制,

只会对相同颜色方框内的 DOM 节点进行比较,即同一个父节点下的所有子节点。

当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。

这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。

2、component diff

  • 如果是同一类型的组件,按照原策略继续比较 virtual DOM tree。

  • 如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点。

  • 对于同一类型的组件,有可能其 Virtual DOM 没有任何变化,如果能够确切的知道这点那可以节省大量的 diff 运算时间,因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

当 component D 改变为 component G 时,即使这两个 component 结构相似,

一旦 React 判断 D 和 G 是不同类型的组件,就不会比较二者的结构,

而是直接删除 component D,重新创建 component G 以及其子节点。

3、element diff

节点处于同一层级时,React diff 提供了三种节点操作,分别为:INSERT_MARKUP(插入)、MOVE_EXISTING(移动)和 REMOVE_NODE(删除)。

新老集合所包含的节点,如下图所示,新老集合进行 diff 差异化对比,

通过 key 发现新老集合中的节点都是相同的节点,因此无需进行节点删除和创建,

只需要将老集合中节点的位置进行移动,更新为新集合中节点的位置,

此时 React 给出的 diff 结果为:B、D 不做任何操作,A、C 进行移动操作,即可。

总结

  • React 通过制定大胆的 diff 策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题;

  • React 通过分层求异的策略,对 tree diff 进行算法优化;

  • React 通过相同类生成相似树形结构,不同类生成不同树形结构的策略,对 component diff 进行算法优化;

  • React 通过设置唯一 key的策略,对 element diff 进行算法优化;

深入理解React虚拟DOM的更多相关文章

  1. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  2. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  3. react虚拟dom diff算法

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

  4. React 虚拟 DOM 的差异检测机制

    React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...

  5. 关于react虚拟DOM的研究

    1.传统的前端是这样的,我在学校也都是这样做的,html(jsp)主要负责提供所有的DOM节点,而javascript负责动态效果,比如按钮点击,图片轮播等,这样的话javascript如何组织结构是 ...

  6. react系列一,react虚拟dom如何转成真实的dom

    react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...

  7. 浅谈React虚拟DOM

    为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...

  8. React/虚拟DOM

    在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...

  9. REACT——虚拟DOM

    深入了解虚拟DOM 实际顺序 jsx->createElemnt ->虚拟DOM(JS 对象)->真实DOM 虚拟DOM中的Diff算法 :当react查找差异的时候,就会采用dif ...

随机推荐

  1. POJ1030 Rating

    题目来源:http://poj.org/problem?id=1030 题目大意:有100支队伍(编号1->100),有两场比赛.以下表的形式列出了两场比赛的名次.(有的队伍没有参赛或只参加了一 ...

  2. webpack安装及使用

    npm run dev 第一次使用的时候用u盘将某些软件带过去. 所以要找到U盘 2.9.x的版本[推荐] 安装:npm install -g vue-cli 检测版本 vue -V/--versio ...

  3. 牛客练习赛43F(推式子)

    要点 题目链接 1e18的数据无法\(O(n)\)的容斥,于是推式子,官解,其中式子有点小错误 不必预处理mu,直接按照素数的个数判断正负即可 #include <bits/stdc++.h&g ...

  4. weblogic.xml

    <?xml version="1.0" encoding="UTF-8"?> <weblogic-web-app xmlns="ht ...

  5. (jmeter内置可调用的变量)jmeter beanShell断言

    用户可以在jmeter- “beanShell断言”中自定义断言.自由灵活的用脚本实现自己的断言  beanShell断言接口介绍  在beanShell中直接可以调用的变量,无需加前缀.  1.lo ...

  6. .db文件打开方式

    有时在工作中,数据库格式db后缀的格式,直接是打不开的,所以我这里使用了数据库管理工具,步骤如下 1. 在电脑安装 Navicat Premium,安装后在桌面生成图标,点击图标打开程序. 2.打开程 ...

  7. 09-----JS事件流的概念(重点)

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  8. FZU Problem 2244 Daxia want to buy house

    模拟题,注意: 1.那两个贷款都是向银行贷的,就是两个贷款的总额不能超过70%,就算公积金贷款能贷也不行,我开始的时候以为公积金贷款是向公司借的,,欺负我这些小白嘛.... 2.最坑的地方 *0.7是 ...

  9. (转)IE6 死后即将大快人心的10件事

    (转)未来五年程序员应当具备的十项技能 W3C CSS 2.1 Specification(Quick Table of Contents) (转)IE6 死后即将大快人心的10件事 2009-04- ...

  10. jQuery动态添加元素,并提交json格式数据到后台

    参考:https://www.cnblogs.com/shj-com/p/7878727.html 下载 下载该插件的地址是:http://www.bootcdn.cn/jquery.serializ ...