1-虚拟dom的两种创建方式，真实dom与虚拟dom的区别

最新推荐文章于 2025-05-05 22:12:27 发布

原创最新推荐文章于 2025-05-05 22:12:27 发布

· 1.3k 阅读

27 ·

版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

3 篇文章

订阅专栏

1-虚拟dom的两种创建方式，真实dom与虚拟dom的区别

文章目录

1-虚拟dom的两种创建方式，真实dom与虚拟dom的区别

1. 什么是虚拟 DOM？

虚拟 DOM（Virtual DOM）是 React 的核心概念之一。它是一个轻量级的 JavaScript 对象，用于描述真实 DOM 的结构和内容。React 通过虚拟 DOM 来提高性能，避免直接操作真实 DOM 带来的性能开销。

虚拟 DOM 的特点：

它是一个 JavaScript 对象。
它是对真实 DOM 的抽象表示。
React 通过对比新旧虚拟 DOM 的差异，高效地更新真实 DOM。

2.使用jsx创建虚拟dom

2.1环境配置

 	<!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
     <script type="text/javascript" src="/js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="/js/babel.min.js"></script>

2.2创建虚拟dom

 const VDom = <h1 id="title"><span> hello react</span></h1>//此处一定不要写引号，因为不是字符串

2.3渲染虚拟 DOM

ReactDOM.render(VDom,document.getElementById('test'))//ReactDOM.render(虚拟dom,页面中的容器)

2.4完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用jsx创建虚拟dom</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
     <script type="text/javascript" src="/js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="/js/babel.min.js"></script>

    <script type="text/babel"> /* 此处写babel，以下写的是jsx，将jsx靠babel翻译 */
        //1.创建虚拟dom
         const VDom = <h1 id="title"><span> hello react</span></h1>//此处一定不要写引号，因为不是字符串
        //2.渲染虚拟dom到页面 
        ReactDOM.render(VDom,document.getElementById('test'))//ReactDOM.render(虚拟dom,页面中的容器)
    </script>
</body>
</html>

3.使用js创建虚拟dom

3.1环境配置

<!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
     <script type="text/javascript" src="/js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="/js/react-dom.development.js"></script>

3.2创建虚拟dom

单层： const VDom = React.createElement('h1',{id:'title'},'hello,react')
嵌套： const VDom = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,react'))//React.createElement(标签名,标签属性,标签内容)

3.3渲染虚拟 DOM

ReactDOM.render(VDom,document.getElementById('test'))//ReactDOM.render(虚拟dom,页面中的容器)

3.4完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用js创建虚拟dom</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
     <script type="text/javascript" src="/js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="/js/react-dom.development.js"></script>

    <script type="text/javascript"> /* 此处写babel，以下写的是jsx，将jsx靠babel翻译 */
        //1.创建虚拟dom
         const VDom = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,react'))//React.createElement(标签名,标签属性,标签内容)
        //2.渲染虚拟dom到页面 
        ReactDOM.render(VDom,document.getElementById('test'))//ReactDOM.render(虚拟dom,页面中的容器)
    </script>
</body>
</html>

4.虚拟dom和真实dom

4.1真实dom

真实 DOM 是浏览器中的标准文档对象模型，它是 HTML 文档的完整表示。浏览器通过真实 DOM 来操作页面中的元素和结构。

特点：

直接操作浏览器：真实 DOM 是浏览器实际渲染和呈现的对象模型。当你修改某个 DOM 元素时，浏览器会重新计算布局并重新渲染页面，甚至可能会导致整个页面的重绘。
性能问题：当页面中的元素发生变化时，浏览器需要重新渲染整个 DOM 树，更新内容。特别是当页面有大量的 DOM 元素时，更新过程会变得缓慢，影响用户体验。
会导致重排和重绘：修改 DOM 时，浏览器会进行重排（reflow）和重绘（repaint）。这些操作比较昂贵，尤其是在需要更新复杂页面时。

<div id="root">
  <h1>Hello World</h1>
</div>

4.2虚拟dom

虚拟 DOM 是一种抽象的 JavaScript 对象模型，它模拟了真实 DOM 的结构，并且存在于内存中。React 等框架通过操作虚拟 DOM 来高效地更新真实 DOM。

特点：

内存中的虚拟 DOM：虚拟 DOM 是在内存中表示页面结构的一个副本。它不会直接影响浏览器中的页面渲染，直到需要更新页面时，框架才会将变化同步到真实 DOM。
减少直接 DOM 操作：虚拟 DOM 可以通过减少与真实 DOM 的交互次数，避免了性能瓶颈。它首先在内存中进行元素的更新，然后通过“diff”算法来计算变化，并仅将差异部分应用到真实 DOM。
提高性能：虚拟 DOM 的核心优势在于只更新发生变化的部分，而不需要重新渲染整个页面。这样可以有效减少浏览器的重排和重绘过程，从而提高性能，特别是在大型应用中

const VDom = <h1>Hello World</h1>;
ReactDOM.render(VDom, document.getElementById('root'));

4.3区别

特性	真实 DOM	虚拟 DOM
定义	浏览器中的实际文档对象模型	内存中的虚拟表示 DOM 的 JavaScript 对象
性能	更新时会导致重排和重绘，性能较低	通过差异对比和批量更新，提高性能
更新方式	每次修改都会直接影响 DOM	先修改虚拟 DOM，再通过对比更新实际 DOM
操作	每次修改会直接影响页面渲染和布局	先计算出差异，然后只更新有变化的部分
应用场景	适用于小型、静态页面	适用于动态更新频繁的大型应用
开发复杂度	简单，但效率低	初始开发稍复杂，但优化性能显著提高