精华内容
下载资源
问答
  • React虚拟DOM的好处

    2018-12-14 15:17:44
    关于React虚拟DOM的令人愉悦的地方在于web开发过程中,它采用了更加高效的方式来更新view层。 我们把使用React的其他好处姑且放到一边,例如单项绑定和组件化。本节我讲详细的讨论一下虚拟DOM,随后公正的抉择为什么...

    关于React提供的虚拟DOM的好处有一些困惑和误解需要阐明。

    我们总是或多或少的听说过直接操作DOM是低效和缓慢的。然而,我们几乎没有可用的数据来支持这个观点。关于React虚拟DOM的令人愉悦的地方在于web开发过程中,它采用了更加高效的方式来更新view层。

    我们把使用React的其他好处姑且放到一边,例如单项绑定和组件化。本节我讲详细的讨论一下虚拟DOM,随后公正的抉择为什么使用React而不是其他UI库(或者任何UI库都不使用)。

    为什么需要UI库

    在反应式的系统中两个最重要的idea应该是事件驱动和对数据变化的响应。

    DOM用户接口组件有内部状态,当无论何时有情况发生变化的时候,更新浏览器并不是像简单的重新生成DOM那么简单。举个例子,如果Gmail曾经这么做的话,因为浏览器窗口为了显示新的信息,需要不断的刷新整个页面,如果你正在写邮件的话,所有的都会被清除,你一定会经常恼怒不已。

    DOM的这种状态方式决定了为什么我们需要一个用户界面库,因为这些库提供了一些解决方案,例如键/值 观察(在Ember库中使用了此方法),或者脏值检测(Angular使用了此方法)。UI库可以观察数据模型的改变,然后在改变发生的时候只改变对应的部分DOM,或者观察DOM改变,然后更新数据模型。

    这种观察和更新的模式叫做双向绑定,这种方式常常让与用户界面的工作更加复杂和让人困惑。

    React的不同之处

    React的虚拟DOM与其他库的不同之处在于从程序员的角度看,这种模式更加的简单。你只需要写纯javascript,然后更新React组件,React将为你更新DOM。数据绑定并没有和应用程序搅和在一起。

    React使用单向数据绑定使得事情变得更加简单,每一次在ReactUI的input域中输入内容,React并不直接改变状态。相反,React更新数据模型,随后引起UI更新,你输入的文字将在域中出现。

    DOM真的慢吗?

    关于虚拟DOM的很多演讲和文章都指出,尽管现在jiavascript的引擎已经很快了,但是读取和写入浏览器的DOM还是很慢,

    这不是特别的准确。DOM是很快的。增加和去除DOM节点就是设置一些javascript对象的属性,这才是简单的操作,这并不是需要做很多的工作。

    真正慢的地方自在于,每次DOM改变的时候,都需要在浏览器中进行渲染。每一次DOM改变的时候,浏览器都需要重新计算CSS,进行布局处理,然后重新渲染页面。这都需要时间。

    浏览器的开发者持续不断的工作来缩短渲染页面的时间。最关键的需要完成的事情是最小化DOM改变,然后批处理DOM变化,在必要的时候才重新渲染页面。(目前原生浏览器还是无法做到)

    这种批处理DOM改变的策略,把我们提升到了一个更加抽象的层次,这也是React虚拟DOM背后的idea。

    虚拟DOM是怎么工作的?

    与真实DOM相似,虚拟DOM也是节点树,以对象的形式列出内容,属性。React的render方法从React组建中创建节点树,因为动作改变等引起数据模型变化的时候,React更新节点树。

    每次React app内部的数据改变,用户界面的虚拟DOM都会构建。

    这里就是最有趣的地方,在React中更新浏览器DOM需要三步: 1. 每次数据模型变化的时候,虚拟DOM节点树都会重新构建。 2. React依赖某个算法(称之为diff算法)来与上一个虚拟DOM节点数进行比较,只有在不同的情况下才重新进行计算。 3.所有的变化要经过批处理,完成之后,真实DOM才进行更新。

    虚拟DOM慢吗?

    有人认为只要有一点改变就重新构造整个虚拟DOM节点树有点浪费,但是他没有提及一个事实,React在内存中存储有两个虚拟DOM树。

    但是,真实情况是渲染虚拟DOM总是比直接渲染浏览器DOM快。这种论断与你使用的浏览器也没多大的关系。

    我们看一些数据

    我不会做一些基准测试,因为已经有很多开发者创建了很多测试来搞清楚React虚拟DOM方法是否比原生的DOM渲染更加快速。但是频繁的结论显示似乎不是这样,但是因为很多测试都是不实际的,所以这些测试结果也无关紧要。

    简单来说,虚拟DOM就是把所有浏览器为了最小化DOM操作,这些对于开发者来说透明的操作进行了抽象。这层额外的抽象的缺点就是增加了CPU的开销。

    这里有一个"hello,world"的例子,使用了原生的DOM操作:

    随后我们在React中做相同的事情。在这里请注意我们需要包含React,React DOM 和babel,其中babel负责把在render方法中的类XML的代码进行转换成原生的javascript。

    结果显示,本地方法更加的快速。这并不是开玩笑,让我们看一下证据。

    这里是加载和渲染真实DOM的性能分析图。(来源于Chrome)

    这里是在同样的浏览器中加载和展示React的"hello,world"应用时间线。

    请注意本质上来说,事情是相同的。React比直接操作DOM慢,而且慢了很多。那么,与jQuery比又如何呢?

    从分析图中,我们可以看到,jQuery进行展示最简单的hello,world的应用比原生的纯javascript满了50毫秒,但是jQuery版本和原声版本都是React的3倍。

    所以,很清晰,如果要说哪一个更快,原生的javascript和jQuery无疑略胜一筹。

    但是,使用库总是要比不使用库慢一些,这显然是再正常不过了,在内存里进行构建DOM,然后再进行真实的DOM操作更慢,也是很符合逻辑的情况。

    废话说多了,现在让我们准确思考一下,怎么使得虚拟DOM加载更快。

    怎么使用虚拟DOM

    我的"hello world"项目对于React来说是不公平的,原因在于他们仅仅处理的是初次渲染页面的性能比较。React设计的目的是用来更新网页。

    因为虚拟DOM的存在,每一次数据模型的改变都会触发虚拟用户接口的刷新。这与其他库进行直接的DOM更新是不一样的。虚拟DOM实际上使用了更少的内训,因为它不需要在内存中设置观察者。

    然而,每一次动作发生的时候,在内存中比较虚拟DOM也是低效的。这需要大量的CPU运算。

    因为这个愿意,React开发者在决定需要渲染什么的时候并不是完全被动的。如果你知道特定的动作不会影响特定的组件,你可以告诉React不要去分析组件差别,这无疑可以大大节省资源,加快应用程序的性能。示范操作中的React程序是可以进行性能提升的。

    真实情况是,没办法准确的知道虚拟DOM是否比直接进行DOM操作更快。因为这依赖于很多变量,尤其是和你怎么优化程序密切相关。

    这并不是革命性或者令人惊讶的事情,每个人使用的工具都是挺好的。React和虚拟DOM给予我们的,是用一种简单的方式进行UI渲染,它提供给我们一种更加简便的方式来更新浏览器。这种简化可以大大释放我们的脑力负担,使得优化用户界面更加的容易。这才是React真正好处所在的地方,如果处理得到,使用React,兼具性能和生产力,何乐而不为呢?

    原文地址:www.accelebrate.com/blog/the-re…

    作者: Chris Minnick

    说明:原文有一处举了一个100000个墨西哥玉米卷的例子,只是想说明不用每一次拿一个玉米卷,而是等待想拿的玉米卷确定之后然后在进行运输到自己国家进行消费。本质上还是映射React的工作方式,原文闲的稍加啰嗦,有删节。

    总结: 本文核心有两点:1.稍微介绍一下React的虚拟DOM和原生DOM的区别和联系。2.文末点出,虚拟DOM如果处理得到,是可以处理好性能问题的,但是React的真正好处在于,它的模块化思想,释放了生产力。

    颠覆:文中有几个观点需要重新审视,我们也经常听说直接操作DOM是低效的,但是这种低效在什么地方,似乎也没有国内的开发者进行准确的数据论证比较,作者给出了它的解释,直接操作DOM并不低效,低效的地方在于渲染页面的过程繁杂浪费时间,相比于React批处理之后只渲染一遍无疑是高效了很多。

    转载于:https://juejin.im/post/5c13b169e51d4556a446276f

    展开全文
  • React虚拟DOM及其作用

    2020-06-03 00:40:34
    虚拟DOM 虚拟DOM是一个js对象 <div id='abc'><span>hello world</span></div>//真实DOM ['div', {id: 'abc'}, ['span', {}, 'hello world']]//虚拟DOM 页面加载和更新过程 1.state数据 2....
    虚拟DOM

    虚拟DOM是一个js对象

    <div id='abc'><span>hello world</span></div>//真实DOM
    ['div', {id: 'abc'}, ['span', {}, 'hello world']]//虚拟DOM
    
    页面加载和更新过程

    1.state数据
    2.jsx模板
    3.数据 + 模板生成虚拟DOM
    4.用虚拟DOM来生成真实DOM
    5.state发生变化
    6.数据 + 模板 生成新的虚拟DOM
    7.比较原始的虚拟DOM和新的虚拟DOM(diff算法)
    8.直接操作DOM,改变不一样的地方

    虚拟DOM的优点

    1.极大的提升了性能
    2.它使得跨端应用( React Native )得以实现。在浏览器端是将虚拟DOM转换为一个个的浏览器DOM节点。也可以将他转换为原生应用的组件,跨段应用就实现了。

    为什么能提升性能

    如果没有虚拟DOM,那么就会直接创建真实的DOM,每次数据改变就会去创建一个真实的DOM,然后真实的DOM比较,再去修改真实的DOM,创建真实DOM是需要消耗很多性能的(因为JS生成DOM树会调用web application级的API,这种级别的API性能损耗是很大的),这样就会非常消耗性能。

    有了虚拟DOM就不一样了,虚拟DOM是一个js对象,创建一个js对象消耗的性能和创建一个真实DOM要小很多,把创建真实DOM替换为创建虚拟DOM就会有极大的性能上的提升。

    展开全文
  • 浅谈React的最大亮点——虚拟DOM

    万次阅读 2017-05-04 16:15:04
    React非常快速是因为它从不直接操作DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM...React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是

    React非常快速是因为它从不直接操作DOM

    虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。

    在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM。

    虚拟DOM具有批处理和高效的Diff算法,可以无需担心性能问题而随时“刷新”整个页面,因为虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作。

    在实际开发中无需关心虚拟DOM是如何运作的,但理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也有很大帮助。


    1、传统App与React App的对比:

    传统App:


    React App:


    innerHTML:render html字符串 + 重新创建所有 DOM 元素

    虚拟DOM:render 虚拟DOM + diff + 更新必要的 DOM 元素


    2、虚拟DOM的原理:

    React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是对虚拟DOM进行。当数据变化时,React会自动更新虚拟DOM,然后将新的虚拟DOM和旧的虚拟DOM进行对比,找到变更的部分,得出一个diff,然后将diff放到一个队列里,最终批量更新这些diff到DOM中。



    3、虚拟DOM的优点:

    最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染。


    4、虚拟DOM的缺点:

    首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。


    5、虚拟DOM的理解误区

    对虚拟DOM的理解往往停留在:通过JavaScript对象模拟原生DOM,加上DOM Diff 极大提升了DOM操作的性能。然而,虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象),这在浏览器中使用 React时不是特别明显,因为写的DOM标签跟原生的没有区别,并且最终都被渲染成了DOM,在React Native中将会有很好的说明。

    展开全文
  • react 虚拟dom 的原理简单理解

    千次阅读 2018-03-29 18:55:59
    在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新diff 到真实DOM 上优点:最终真实DOM 就只更新了diff 部分,...

    原理:

    react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新diff 到真实DOM 上

    优点:最终真实DOM 就只更新了diff 部分,提高了渲染速度

    缺点:首次渲染DOM 时候由于多了一层虚拟DOM 计算,就比html 渲染慢

    展开全文
  • react 虚拟dom

    2020-06-28 16:19:54
    1、state数据+jsx模板(标签)生成虚拟dom来描述真实dom(js对象) <div id='abc'><span>hello react</span></div> ['标签名',{标签属性},子内容]: ['div',{id:'abc'},['span',{},'hello ...
  • React虚拟Dom

    2020-06-11 19:41:09
    react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新...
  • 看官莫急,急的话,直接看最后 改进方法二 React 原始方法 1、state数据 2、JSX 模版 3、数据+模版 结合,生成真实的DOM,来显示 4、state发生改变 5、数据+模版 结合,生成真实的Dom,替换原始的DOM 缺陷: 第一次...
  • React虚拟DOM的理解

    2020-12-13 18:58:46
    React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来...
  • 作为前端最火的两个框架,React 和 Vue 是面试必考的内容。特别是到了中高级前端岗,对于框架的考察会更加深入,比如:Vue3.0 相对于 Vue2.x 有哪些变化?为什么 v-for...
  • React 虚拟DOM及JSX总结

    2021-03-20 09:19:30
    1.React概述 是用于构建用户界面的JS库,旨在简化可视化界面的开发 基于JSX的语法,JSX是React的核心组成部分,它使用xml标记的方式去直接声明界面和HTML,JS混写 ...高效:React通过对DOM的模拟,最
  • React 虚拟DOM

    2017-09-15 18:20:07
    一、什么是虚拟DOM React非常快速是因为它从不直接操作DOM。...在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM虚拟DOM具有批处理和高效的Diff算法,可以
  • 一、react 中的虚拟 DOM 第一种方案: 第一步,state 数据 第二步,JSX 模版 第三步,数据 + 模版的结合,生成真实的 DOM,来显示 第四步,state 发生改变 第五步,数据 + 模版的结合,生成真实的 DOM,替换原始...
  • React里,一段虚拟dom,我们称之为组件,在react内组件的最小颗粒度就是一个html标签 react组件名称首字母必须大写。 优点: 1、JSX执行更快,编译为JavaScript代码时进行优化 2、类型更安全,编译过程如果出错...
  • 3. 用虚拟DOM的结构,生成真实的DOM ['div', {id: 'abc'}, ['span', {}, 'Hello']] 4. 用虚拟DOM的结构,生成真实的DOM &lt;div id="abc"&gt;&lt;span&gt;Hello!&lt;/span&...
  • 虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚拟DOM产生全新的虚拟DOM, 新旧虚拟DOM使用diff算法,得到patch(也就是需要修改的部分),然后将这个patch打到浏览器...
  • React虚拟DOM

    2018-09-27 15:33:19
    React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后...
  • 5.数据 + 模板 结合,生成真实的DOM,替换原来的DOM 缺陷: 第一次生成一个完整的DOM片段 第二次有生成了一个完整的DOM片段 第二次的DOM替换第一次的DOM,非常消耗性能 二. 逐步改进 1.sta...
  • 真实DOM与虚拟DOM的比较 真实DOM是由浏览器渲染而成的一棵真实的DOM树。当我们每一次对这一棵真实的DOM树进行修改的时候,浏览器并不会去寻找我们到底对这棵真实的DOM树哪里进行修改了,而是会直接砍掉这棵真实的...
  • React-为什么要使用虚拟DOM

    千次阅读 2016-07-01 20:42:10
    什么是虚拟DOM(Virtual DOM)首先,解释下虚拟DOM虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应。虚拟DOM的工作原理是:数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较,...
  • react虚拟dom

    2019-05-24 09:54:51
    第一种方式: 整体替换DOM 1、 state数据 2、 JSX 模板 3、 数据 + 模板 生成真实的DOM 来显示 4、 state 发生变化 5、 数据 + 模板 生成真实的DOM, 替换原始的DOM 缺陷: 第一次生成了一个完整的DOM片段 第二次...
  • React 虚拟DOM diff算法

    2020-06-11 22:58:12
    虚拟DOM virtul DOM 也就是虚拟节点,通过JS的Object对象模拟DOM中的真实节点对象,再通过特定的render方法将其渲染成真实的DOM节点 平常我们想到的做法是: 1.state数据 2.JSX模板 3.数据 + 模板结合,生成真实的...
  • 需要调用React.createElement()的方式进行创建。 React.createElement() 第一个参数:创建的标签; 第二个参数:标签的属性; 第三个参数:为第一个参数标签里的内容; <div id='test'></div> &...
  • React 中的虚拟DOM

    2019-01-20 12:11:56
    因为它引入了虚拟DOM的概念。 呃,来看一下,render 函数渲染页面的几种做法。 前两步都是拿到state 数据 与 JSX模版。第一种就是比较朴素的方式。第二种方式虽然不用完全替换,但是也需要比对两个DOM。第三种是...
  • 虚拟DOM的实现原理和优劣对比

    千次阅读 2019-12-24 17:28:39
    虚拟DOM的实现原理和优劣对比
  • React是如何提升渲染性能 ...生成虚拟DOM(本质上是js对象,用它来描述真实DOM)— 损耗了性能 ['div', {id: 'abc'}, ['span', {}, 'hello world']] state发生变化 数据+模板 生成虚拟DOM — 极大的提升了性能 ['
  • 虚拟DOM

    2021-08-19 23:04:03
    虚拟DOM相关知识
  • react——虚拟 DOM

    2019-08-21 14:59:16
    数据 + 模板结合,生成真实的 DOM,替换原始的 DOM 缺陷:生成和替换非常消耗性能 思路二 state 数据 模板 (JSX) 数据和模板相结合,生成真实的 DOM,来显示 state 发生改变 数据 + 模板结合,生成真实的 DOM,...
  • react中的虚拟DOM

    2020-06-12 17:48:20
    假如让我们自己实现react中数据驱动视图,我们该怎么做呢? 一般人想到的做法是: state 数据 JSX模版 数据 + 模版结合,生成真实的DOM,来显示 state 发生改变 数据 + 模版结合,生成真实的DOM,替换原始...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,374
精华内容 1,749
关键字:

react虚拟dom优点