虚拟DOM的两种创建方法、真实DOM和虚拟DOM

最新推荐文章于 2024-07-23 10:57:08 发布

向阳菌

最新推荐文章于 2024-07-23 10:57:08 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_68997646/article/details/127419246

版权

1.第一种方法：使用javascript

A.这里要用到一个重要的标签：

const VDOM=React.createElement(标签名，标签属性，标签内容)

代码示例如下：

<!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="root"></div>
    <!-- 引入核心库，记得要放在react-dom前面，因为先有核心库，才能创建好环境引入其他依赖包 -->
    <script src="./react.development.js"></script>
    <!-- 引入react帮你操作DOM的库 -->
    <script src="./react-dom.development.js"></script>
    <!-- 将jsx转化为js -->
    <script type="text/javascript">   //在这里一定要写成是babel
        const VDOM=React.createElement('h1',{id:'1',class:'laozhichi'},'hello-react') 
        //在这里不需要再引入babel，直接可以使用javascript
        ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
</body>
</html>

B.如果我们要在这里插入一个span标签的时候，如果这样子：

const VDOM=React.createElement('h1',{id:'1',class:'laozhichi'},'<span>hello-react</span>')

那么效果图是这个样子：

也就是说这个时候span标签不能自动解析到页面之上

那么就要换一种方式：

const VDOM=React.createElement('h1',{id:'1',class:'laozhichi'},React.createElement('span',{},'hello-react'))

这个时候就能正常显示hello-react啦

2.第二种方法：使用jsx

使用下列代码：

   const VDOM=(
       <h1 id="1">
           <span>hello-react</span>
       </h1>
   )

代码示例如下：

<!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="root"></div>
    <!-- 引入核心库，记得要放在react-dom前面，因为先有核心库，才能创建好环境引入其他依赖包 -->
    <script src="./react.development.js"></script>
    <!-- 引入react帮你操作DOM的库 -->
    <script src="./react-dom.development.js"></script>
    <!-- 将jsx转化为js -->
    <script src="./babel.min.js"></script>
    <script type="text/babel">   //在这里一定要写成是babel
        const VDOM=(
            <h1 id="1">
                <span>hello-react</span>
            </h1>
        )
        ReactDOM.render(VDOM,document.getElementById('root'))
    </script>
</body>
</html>

3.虚拟DOM和真实DOM

其实虚拟DOM就是一个js当中的简单的object

    <script src="./babel.min.js"></script>
    <script type="text/babel">   //在这里一定要写成是babel
        const VDOM=(
            <h1 id="1">
                <span>hello-react</span>
            </h1>
        )
        ReactDOM.render(VDOM,document.getElementById('root'))
        console.log(VDOM);   //虚拟DOM
        const div=document.getElementById('root')  //真实DOM
        console.log(div);
    </script>

我们看一下输出：虚拟DOM

真实DOM（真实DOM在console.log的时候，并不会像虚拟DOM一样，会给出一些属性什么的，只会给出一个标签）

如果要真正地调试查看一些信息，可以在代码后方加上一个debugger

    <script type="text/babel">   //在这里一定要写成是babel
        const VDOM=(
            <h1 id="1">
                <span>hello-react</span>
            </h1>
        )
        ReactDOM.render(VDOM,document.getElementById('root'))
        console.log(VDOM);
        const div=document.getElementById('root')
        console.log(div);
        debugger
    </script>

然后就可以看到VDOM的属性啦：