虚拟DOM与真实DOM

最新推荐文章于 2023-12-05 11:59:31 发布

豆浆油条_煎bingo子

最新推荐文章于 2023-12-05 11:59:31 发布

阅读量165

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_45679015/article/details/111472547

版权

React 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先来个简单的React例子~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
    // 1.创建虚拟DOM
       const VDOM = <h1>Hello React</h1>;//此处不要写引号，因为不是字符串
    // 2.渲染虚拟DOM到页面
       ReactDOM.render(VDOM,document.getElementById('test'));
    
    </script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
</body>
</html>

在这里插入图片描述

什么是虚拟DOM呢?让我们来看看~~

 console.log("虚拟DOM",VDOM);
 
 console.log(typeof VDOM);//查看虚拟DOM的类型
 
 console.log(VDOM instanceof Object);//判断虚拟DOM是不是Object的实例

在这里插入图片描述
哦，原来虚拟DOM是一个Object对象呀

接下来让我们看看真实DOM在哪里呢，其实这些都是真实的DOM

  <!-- 准备好一个容器 -->
    <div id="test"></div>

怎么获取真实DOM呢？很简单

 //获取真实DOM
 const TDOM = document.getElementById('test');

让我们看看真实DOM有什么吧~让我们加个断点看看
在这里插入图片描述
而虚拟DOM只有这些东西

总结：

关于虚拟DOM：

1.本质是Object类型的对象(一般对象)

2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上有那么多的属性

3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

豆浆油条_煎bingo子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
虚拟DOM与真实DOM

先来个简单的React例子~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
复制链接

扫一扫