React学习day2

最新推荐文章于 2024-04-23 21:38:50 发布

我在东软打代码

最新推荐文章于 2024-04-23 21:38:50 发布

阅读量69

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_46758732/article/details/116407257

版权

React 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

虚拟DOM的两种创建方式

1、用jsx创建虚拟DOM
代码如下：
在h1内加上 id=“test”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用jsx创建虚拟DOM</title>

</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    //创建虚拟DOM
    const VDOM = <h1 id="test">Hellow Reacct</h1>
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
</body>
</html>

运行结果
在这里插入图片描述
2、用js创建虚拟DOM，比较繁琐，不推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用js创建虚拟DOM</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script type="text/javascript" src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script type="text/javascript" src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<script type="text/javascript">
    //创建虚拟DOM
    const VDOM = React.createElement('h1',{id:'test'},React.createElement('span',{},'Hello,React'))
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
</body>
</html>

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

虚拟DOM与真实DOM

虚拟DOM比较少，真实DOM比较多，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
虚拟DOM本质是object类型的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--准备好一个容器-->
<div id="test"></div>
<div id="demo"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    //创建虚拟DOM
    const VDOM = <h1 id="test">Hellow Reacct</h1>
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    const TDOM = document.getElementById('demo')
    console.log('虚拟DOM',VDOM);
    console.log('真实DOM',TDOM);
    debugger;
</script>


</body>
</html>

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

我在东软打代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React学习day2

虚拟DOM的两种创建方式1、用jsx创建虚拟DOM代码如下：在h1内加上 id=“test”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用jsx创建虚拟DOM</title></head><body><div id="test">&l
复制链接

扫一扫