浅谈React的最大亮点——虚拟DOM

亦凉 2022-06-16 03:50 265阅读 0赞

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

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

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

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

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

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

传统App：

![20170504161311010][]

React App：

![20170504161319670][]

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

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

2、虚拟DOM的原理：

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

![20170504161331322][]

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中将会有很好的说明。

[20170504161311010]: /images/20220616/b2583f1f114c46afb9ef7b6520bd9346.png
[20170504161319670]: /images/20220616/5b0cdf9b80454ec08563a124c7b6e6bc.png
[20170504161331322]: /images/20220616/b5d33e87b5db46f99a6ea51241bab9b7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 React-虚拟DOM

先举个例子： import React from 'react' import ReactDOM from 'react-dom' let

àì夳堔傛蜴生んèń/ 2023年07月03日 08:29/ 0 赞/ 31 阅读

相关 react中的虚拟DOM

数据驱动原理假如让我们自己实现react中数据驱动视图，我们该怎么做呢？一般人想到的做法是： 1. state 数据 2. JSX模

矫情吗；*/ 2023年02月17日 05:24/ 0 赞/ 5 阅读

相关浅谈HTML-DOM

《HTML-DOM》 \Node 继承Document，Element继承Node。 \所以对于文本节点，节点值是文本内容；对于属性节点，节点值是属性的值。 \且节

电玩女神/ 2022年07月19日 02:19/ 0 赞/ 159 阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 242 阅读

相关浅谈React的最大亮点——虚拟DOM

React非常快速是因为它从不直接操作DOM。虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到

亦凉/ 2022年06月16日 03:50/ 0 赞/ 266 阅读

相关 React虚拟DOM浅析

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

川长思鸟来/ 2022年05月27日 13:28/ 0 赞/ 213 阅读

相关 react 虚拟dom

react 虚拟dom的优点：数据渲染到页面的方式： 1）.手动for循环整个数组； 2）.使用模板引擎；缺点：性能上的问题比

你的名字/ 2022年05月20日 02:53/ 0 赞/ 252 阅读

相关 React之虚拟DOM

React非常快速是因为它从不直接操作DOM。在React中，render执行的结果得到的并不是真正的DOM节点，而仅仅是JavaScript对象，称之为虚拟DOM。虚

Myth丶恋晨/ 2022年05月10日 08:52/ 0 赞/ 208 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 314 阅读

相关 react 虚拟dom

1、state数据+jsx模板(标签)生成虚拟dom来描述真实dom(js对象),第一次时是损耗性能 <div id='abc'><span>hel

左手的ㄟ右手/ 2021年07月24日 13:48/ 0 赞/ 389 阅读