React之虚拟DOM

Myth丶恋晨 2022-05-10 08:52 185阅读 0赞

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

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

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

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

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

*  传统App与React App的对比：

传统App：

![20170504161311010][]

React App：

![20170504161319670][]

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

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

*  虚拟DOM的原理：

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

![20170504161331322][]

*  虚拟DOM的优点：

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

*  虚拟DOM的缺点：

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

*  虚拟DOM的理解误区

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

[20170504161311010]: /images/20220510/02278d9be5c0437e8e8ac1d2ccb6fafd.png
[20170504161319670]: /images/20220510/348e3492755344b3a6774918ecff8fa0.png
[20170504161331322]: /images/20220510/b7f52d408a244b42860d3e540002fcc6.png

发表评论取消回复

表情：

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

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

相关阅读

相关 React-虚拟DOM

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

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

相关 React之虚拟DOM和diff算法

虚拟DOM和diff算法 createEmement 创建组件 JSX转换过程虚拟DOM diff算法递归实现diff算法 crea

迷南。/ 2023年01月12日 11:53/ 0 赞/ 161 阅读

相关什么是 React 虚拟 DOM?

我们都知道 react 中 state 发生改变, render 函数重新执行渲染页面那么自己实现这个功能的思路? 1. 定义 state,有了数据 2. 有一个

缺乏、安全感/ 2022年12月10日 01:25/ 0 赞/ 231 阅读

相关 react获取并设置虚拟DOM

react，这就开始了。 react的一个特点，就是所谓虚拟dom。虚拟者，就是只存在于逻辑运算中，物理并不存在。因此，想获取或者设置dom，用以前的document.get

朱雀/ 2022年11月11日 05:22/ 0 赞/ 165 阅读

相关 React虚拟DOM和DIFF算法

VDOM VDOM，也叫虚拟 DOM，它是仅存于内存中的 DOM，因为还未展示到页面中，所以称为 VDOM var vdom = document.create

Myth丶恋晨/ 2022年07月24日 10:20/ 0 赞/ 236 阅读

相关 React虚拟DOM浅析

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

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

相关 React之react-router-dom

1:一些区别 1. `react-router` React Router 核心 2. `react-router-dom` 用于 DOM 绑定的 React Rou

拼搏现实的明天。/ 2022年05月20日 06:08/ 0 赞/ 173 阅读

相关 react 虚拟dom

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

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

相关 React之虚拟DOM

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

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

相关 react 虚拟dom

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

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