React中的Virtual DOM(看这一篇就够了)

news2024/7/6 19:06:17

文章目录

前言
了解Virtual DOM
react创建虚拟dom的方式
React Element
虚拟dom的流程
虚拟dom和真实dom的对比
后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：react合集
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

了解Virtual DOM

虚拟 DOM（Virtual DOM）是 React 中的一种技术，它是一个轻量级的 JavaScript 对象树，用于描述真实 DOM 的结构和属性。虚拟 DOM 可以作为中间层存在，用于优化页面渲染的性能和效率。

作用

虚拟 DOM 的基本思想是将整个 DOM 结构抽象成一个 JavaScript 对象树，通过对这个对象树的操作来更新实际的 DOM。当组件的状态或属性发生变化时，React 会生成一个新的虚拟 DOM 树，并通过比较新旧虚拟 DOM 树的差异，找出需要更新的部分。然后，React 会将这些差异转化为最小的 DOM 操作，只更新实际 DOM 中需要变化的部分，从而提高页面渲染的性能。
虚拟 DOM 的主要优势在于它可以避免频繁地直接操作实际 DOM。相比于直接修改实际 DOM，虚拟 DOM 的操作更加轻量级，因为它是在内存中进行的。只有当需要更新实际 DOM 时，React 才会将变化应用到实际 DOM 上，从而减少了对实际 DOM 的操作次数，提高了性能。
此外，虚拟 DOM 还可以简化开发流程。开发者可以将关注点集中在组件的逻辑和状态管理上，而不需要过多地关注实际 DOM 的操作。这样可以提高开发效率，并使代码更易于维护和理解。

总结来说，虚拟 DOM 是 React 中的一个重要概念，通过在内存中构建和操作 JavaScript 对象树，它可以优化页面渲染的性能和效率，同时简化开发流程。虚拟 DOM 在 React 中的应用使得前端开发更加高效和便捷。

react创建虚拟dom的方式

第一种：jsx来创建虚拟dom

const VDOM = (
	<div>
		<h1>我是张三</h1>
		<p>今年28岁了</p>
	</div>
)

使用 React.createElement() 方法：

React 提供了一个名为 createElement() 的方法，用于创建虚拟 DOM 元素。这个方法接受三个参数：元素类型、属性对象和子元素。

const element = React.createElement('div', { className: 'my-class' }, 'Hello, React!');

总结

上述代码中，createElement() 方法创建了一个

元素的虚拟 DOM，其中包含了 className 属性和文本内容。

无论使用 JSX 还是 createElement() 方法，最终都会生成一个虚拟 DOM 对象，它是一个普通的 JavaScript 对象，包含了元素类型、属性、子元素等信息。这个虚拟 DOM 对象可以被 React 用于进行组件的渲染和更新操作。

需要注意的是，创建虚拟 DOM 只是在内存中构建了一个 JavaScript 对象，并没有直接操作实际的 DOM。要将虚拟 DOM 渲染到实际的 DOM 上，需要使用 React 的渲染方法，如 ReactDOM.render()。这个方法会将虚拟 DOM 转化为实际的 DOM 并插入到指定的容器中。

React Element

Virtual DOM 是真实 DOM 的模拟，真实 DOM 是由真实的 DOM 元素构成，Virtual DOM 也是由虚拟的 DOM 元素构成。
真实 DOM 元素我们已经很熟悉了，它们都是 HTML 元素（HTML Element）。
那虚拟 DOM 元素是什么呢？React 给虚拟 DOM 元素取名叫 React 元素（React Element）。

在这里插入图片描述

虚拟dom的流程

初始化：当创建一个 React 组件时，React 会生成一个虚拟 DOM 树，它是由轻量级的 JavaScript 对象构成的，与实际的 DOM 结构相对应。

渲染虚拟 DOM：通过调用组件的 render 方法，React 将虚拟 DOM 树转换为真实的 DOM 元素。这个过程会根据组件的状态和属性，生成一个新的虚拟 DOM 树。

Diff 算法：在每次更新组件时，React 会使用 Diff 算法比较新旧虚拟 DOM 树的差异，找出需要更新的部分。Diff 算法通过比较节点的类型、属性和顺序等信息，尽可能地减少对实际 DOM 的操作。

更新实际 DOM：根据 Diff 算法的结果，React 会将需要更新的部分转化为最小的 DOM 操作，然后将其应用到实际的 DOM 结构中。这样可以避免全量更新整个页面，提高页面渲染的效率。

监听数据变化：React 使用了单向数据流的模型，当组件的状态或属性发生变化时，React 会重新执行渲染流程，生成新的虚拟 DOM 树，并更新实际的 DOM 结构。

销毁组件：当组件被销毁时，React 会清除对应的虚拟 DOM 树和实际的 DOM 结构，释放相关资源。

虚拟dom和真实dom的对比

性能更好：虚拟DOM可以减少对真实DOM的操作次数，从而提高应用程序的性能。当组件状态发生变化时，React会使用虚拟DOM来计算出最小化的DOM操作，然后只更新需要更新的部分，而不是整个页面。
更容易维护：由于React使用虚拟DOM，我们可以将组件的状态和UI分离开来。这使得代码更加模块化，易于维护和重构。
跨平台：React Native使用虚拟DOM来构建原生应用程序，因此可以在多个平台上使用相同的代码。
更好的开发体验：React使用JSX语法来描述UI，这使得代码更加简洁、易读、易写，并且可以通过组件化的方式来组织代码。
更好的可测试性：由于React组件是纯函数，它们的输出仅取决于输入，因此可以更容易地编写自动化测试。