react学习——03虚拟dom和真实dom

最新推荐文章于 2024-10-04 17:00:22 发布

一叶飘零晋

最新推荐文章于 2024-10-04 17:00:22 发布

阅读量192

点赞数 3

分类专栏： react 文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/ChenJin_2/article/details/139828406

版权

react 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_虚拟DOM和真实DOM.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<div id="demo"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
    //1.创建虚拟DOM
    const vdom =(
        <h1 id="title" className="red"><span>helloReact</span></h1> /*此处一定不要写引号*/
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vdom,document.getElementById('root'))
    const demo = document.getElementById('demo')
    console.log('虚拟DOM',vdom)
    console.log('真实DOM',demo)
    debugger;
    /*
    关于虚拟DOM和真实DOM:
    虚拟DOM:
    1.本质是Object类型对象（一般对象）
    2.虚拟DOM比较“轻”，真实DOM比较‘重’，虚拟DOM是react内部在用的，无需真实DOM上那么多的属性。
    3.虚拟DOM最终会被转换成真实DOM，然后渲染到页面上。
    */
</script>
</body>
</html>

2、虚拟DOM
在这里插入图片描述
3、真实DOM

总结
关于虚拟DOM和真实DOM:
虚拟DOM:
1.本质是Object类型对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较‘重’，虚拟DOM是react内部在用的，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被转换成真实DOM，然后渲染到页面上。