【React02】虚拟DOM的两种创建方式及比较

最新推荐文章于 2024-07-12 09:36:48 发布

Destiny157

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量60

点赞数

分类专栏： React入门文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/Destiny157/article/details/131724987

版权

React入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

【React02】虚拟DOM的两种创建方式及比较

使用jsx创建虚拟DOM

1、创建新文件夹，复制上一篇文章的代码，在h1 标签中加入id属性即可。

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

运行结果
在这里插入图片描述

使用js创建虚拟DOM

1、在此文件夹下新建一个页面，为使用js创建虚拟DOM。
2、修改其中代码，取消引入的babel库，使用javascript来写。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--准备好一个容器-->
  <div id="test"></div>
  <!--引入核心组件(引入的顺序不要错)-->
  <script src="../js/react.development.js"></script>
  <!--引入操作DOM组件-->
  <script src="../js/react-dom.development.js"></script>
  <!--执行操作-->
  <script type="text/javascript">
    //1、创建虚拟DOM
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React');
    //2、渲染虚拟DOM到页面上
    ReactDOM.render(VDOM,document.getElementById('test'));
  </script>
</body>
</html>

运行结果
在这里插入图片描述
虽然目前看二者写法都可以实现，但一般不用js方法。
下面通过例子可以进行比较。如更改需求，在H1标签中包含一个span标签，里面再写hello,React。

jsx方式只需要修改创建虚拟DOM中的代码即可实现。

//1、创建虚拟DOM
    const VDOM = <h1 id="title"><span>Hello,React</span></h1>/*此处不要写引号，不是字符串*/

运行结果：
在这里插入图片描述

而js方式创建则需要继续嵌套。

//1、创建虚拟DOM
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'));

在这里插入图片描述
因此有了jsx可以更好的解决这些问题。
通过控制台输出检查写的虚拟DOM是什么，代码和输出结果如下图。

console.log('虚拟DOM',VDOM);
    console.log(typeof VDOM);
    console.log(VDOM instanceof Object);

在这里插入图片描述
发现虚拟DOM：
本质上是Object类型的对象，也就是所说的一般对象。
虚拟DOM比真实DOM的属性要少。
虚拟DOM最终会被React转换为真实DOM呈现在页面上。

学习尚硅谷React笔记https://www.bilibili.com/video/BV1wy4y1D7JT?p=3&vd_source=1154a34d5d0ba07e9bbec076d81cb315

Destiny157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【React02】虚拟DOM的两种创建方式及比较

主要介绍React虚拟DOM的两种创建方式及优缺点比较
复制链接

扫一扫

专栏目录

【React02】虚拟DOM的两种创建方式及比较

【React02】虚拟DOM的两种创建方式及比较

使用jsx创建虚拟DOM

使用js创建虚拟DOM

“相关推荐”对你有帮助么？