react16：创建虚拟DOM的两种方式

richest_qi

已于 2022-03-24 15:08:15 修改

阅读量797

点赞数 1

分类专栏： React17/18 文章标签：虚拟DOM jsx babel

于 2022-03-21 22:10:33 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/123647041

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

react中创建虚拟DOM有以下两种方式，分别是，

使用jsx创建虚拟DOM
使用js创建虚拟DOM

下面一一做介绍。

使用jsx创建虚拟DOM

<!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>jsx创建虚拟DOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/babel">
        //创建虚拟DOM
        const VDOM = (
            <div id="box">
                <span>Hello,React</span>
            </div>
        );
        
        //将虚拟DOM渲染到页面
        ReactDOM.render(VDOM,document.getElementById("app"));
    </script>
</body>
</html>

在这里插入图片描述

react.development.js，react核心库，本例使用的是16.8.0版本，可到这里下载该版本。
react-dom.development.js，react的扩展库，用于支持react操作DOM，本例使用16.8.0版本，可到这里下载。
babel.min.js，用于 es6转es5、jsx转js，6.26.0版本，可到这里下载。

html文件中引入了react.development.js、react-dom.development.js，注意，引入顺序有先后：必须react.development.js在前，react-dom.development.js在后。

因为本例中使用jsx创建虚拟DOM，因此，script标签的type属性必须是text/babel，不是text/javascript。type="text/javascript"相当于告诉浏览器，script标签里有jsx，需要使用babel将jsx转换为js。
在这里插入图片描述

虚拟DOM本质上是一个Object类型对象，即一个普通js对象。
在这里插入图片描述

使用js创建虚拟DOM

<!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>js创建虚拟DOM</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
</head>
<body>
    <div id="app">

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

    </script>
</body>
</html>

在这里插入图片描述
因为不是用jsx，而是用js创建虚拟DOM，所以本例中不需要引入babel.min.js，script标签的type属性设置为text/javascript即可，或者干脆不写（因为type属性的默认值就是text/javascript）。

richest_qi

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
react16：创建虚拟DOM的两种方式

react中创建虚拟DOM有以下两种方式，分别是，使用jsx创建虚拟DOM使用js创建虚拟DOM下面一一做介绍。使用jsx创建虚拟DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
复制链接

扫一扫

专栏目录