当前位置：首页 > news >正文

React怎么创建虚拟dom和挂载到页面

news 文章来源：https://blog.csdn.net/weixin_39570751/article/details/143270643 2024/11/2 10:18:52

1、🍟你可以直接下载本节配套的资源代码，然后导入vscode看效果，也可以跟着教程一点一点敲，都是没问题的。
2、🤔怎么运行本节代码？很简单，随便找个浏览器打开index.html即可。💕

代码目录

在这里插入图片描述

运行效果

在这里插入图片描述

在讲React之前呢，我们得先有一个趁手的IDE，虽然现在WebStorm免费了，但是安装和配置起来呢，对电脑的要求还是有一定门槛，所以我们还是使用VSCODE。

除了直接用浏览器打开index.html，我们也可以用vscode的goLive功能，只需要安装一个插件。

要在VSCode中打开浏览器，可以按照以下步骤进行操作：

安装VSCode插件：首先，打开VSCode，点击左侧的扩展图标（可通过快捷键Ctrl + Shift + X打开）。在搜索栏中输入关键词“Live Server”并选择第一个结果，点击插件右下角的“安装”按钮。
启动Live Server：在安装完成后，点击左下角的“Go Live”图标，再点击“Open Browser”按钮，这样便会自动在默认浏览器中打开你的HTML文件。
更改默认浏览器：如果想要在不同的浏览器中打开文件，可以在VSCode的设置中进行更改。点击左上角的“文件”菜单，选择“首选项”（Preferences），再选择“设置”（Settings）。在搜索框中输入“liveServer.settings.CustomBrowser”并点击结果。选择“编辑设置.json”（Edit in settings.json），然后在打开的文件中添加以下代码：

“json “liveServer.settings.CustomBrowser”: “浏览器完整路径” “

在这里，将“浏览器完整路径”替换为你所希望使用的浏览器的完整路径。例如，如果你想要使用Google Chrome，可以填写以下代码：

“json “liveServer.settings.CustomBrowser”: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe” “

使用自定义快捷键：你还可以为打开浏览器操作添加自定义快捷键。点击左上角的“文件”菜单，选择“首选项”（Preferences），再选择“键盘快捷方式”（Keyboard Shortcuts）。在搜索框中输入“live server”并点击结果。找到“Open Browser”命令，右击并选择“更改键绑定”（Change Keybinding）。然后按下你希望的快捷键，并保存设置。

现在，你就可以使用VSCode打开浏览器来查看你的HTML文件了！

1、聊聊这节课的需求

很简单啦，就是在页面上输出一段话而已。
在这里插入图片描述

2、技术方案

为了降低入门React的难度，我们直接用html的方式，而不是脚手架的方式。
代码非常简单，分为三步。

1、准备好一个容器

<div id="test"></div>

在页面上随便写一个div，这个就是我们要用React渲染的目标区域。

2、引入必要的js文件

<!-- 引入react核心库 -->
<script type="text/javascript" src="../static/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../static/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../static/babel.min.js"></script>

第一个是React核心库，还记得当年你是怎么学习jQuery的吗，是不是第一步就是引入jQuery啊，然后就可以用$去操作一些DOM元素了。比如，你可以用

$('#test').html('<h1>Hello jQuery</h1>');

来实现类似的效果。

那么同样的道理，现在用React了，自然也要引入react。

第二个是React-dom，用来支持dom操作的，用了React了，我们就不需要手动去操作dom了，而是让react帮我们操作，就需要引入这个库。

第三个是babel，我们知道，浏览器早期是不支持ES6的，也不支持import语法，就需要用babel来做转换，转成ES5才能运行代码。但是呢，除了ES6转ES5，babel还有一个作用，就是解析JSX语法。

大家都知道JS，JSX又是什么鬼？简单来说，JSX支持直接在JS文件里面写html代码，主要就是这个作用。

3.创建虚拟dom并渲染到页面

<script type="text/babel"> //1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))
</script>

注意，<h1>Hello,React</h1> 这个玩意可不是字符串啊，而是虚拟DOM，是JSX语法构建的虚拟DOM。有人问，为啥不用JS创建虚拟DOM呢，JS不好吗，不香吗？

欸，你还真别说，React是支持这样做的，但是很不推荐，就好比你写一个标签，里面有属性，标签里面还套标签，你用JS写，就很冗余了，还看不清结构。如果你曾经写过Java，并且经历过Servelt到JSP的阶段，那么你应该能明白我在说什么。

所以，React才特别推出了JSX语法了。

3、技术验证

用浏览器打开index.html，检查输出是否符合预期

5、源码下载

下载本节配套资源即可。

4、答疑

有问题直接留言即可。