React创建虚拟dom的两种方式

最新推荐文章于 2024-03-21 22:39:09 发布

Wcbddd

最新推荐文章于 2024-03-21 22:39:09 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/HAI_WD/article/details/132723078

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

0x00 前言

文中工具皆可关注皓月当空w 公众号发送关键字工具获取

0x01 正文

1.原生js创建虚拟dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/javascript">
        const VDOM = react.createElement('h1',{id:"title"},'Heelo,React!')
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

2.jsx创建虚拟dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1 id="title">Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

0x02 对比

在实际的应用中都是通过jsx进行虚拟dom的创建，原因是因为使用jsx会比使用js更加方便，并且jsx也是我们常说的语法糖结构，可以帮我们做很多的事情和内容。

1.小技巧

在jsx创建虚拟dom的时候，可以通过小括号进行包裹来表示格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = (
            <h1 id="title">Hello,react</h1>
        )
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>