02_虚拟DOM的两种创建方式及区别

最新推荐文章于 2024-09-25 18:15:20 发布

又菜又爱玩代码

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量71

点赞数

分类专栏： react学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_46431018/article/details/126161383

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 导入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 导入DOM操作库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1.创建虚拟DOM
    const VDDM =<h1 id="title">Hello, React</h1>
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDDM,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="../js/react.development.js"></script>
<!-- 导入DOM操作库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<!-- 引入babel 用于将jsx转成js -->
<!-- <script type="text/javascript" src="../js/babel.min.js"></script> -->

<!-- <script type="text/babel">
    // 1.创建虚拟DOM
    const VDDM =<h1 id="title">Hello, React</h1>
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDDM,document.getElementById('test'))

</script> -->

<script type="text/javascript">
    // const VDDM=React.createElement(标签名，标签属性，标签内容)
    const VDDM = React.createElement('h1',{id:"title"},"Hello,React")
    ReactDOM.render(VDDM,document.getElementById('test'))

</script>

    
</body>
</html>

3.两者区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsx创建虚拟DOM</title>
</head>
<body>
    <!-- 准备容器 -->
    <div id="test"></div>
    <div id="demo"></div>

    <!-- 导入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 导入DOM操作库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转成js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    // 1.创建虚拟DOM
    const VDDM =(
        <h1 id="title">
           <span>Hello,React</span> 
        </h1>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDDM,document.getElementById('test'))
    
    console.log('虚拟DOM',VDDM);
  //  console.log(typeof VDDM)
    const TDDM =document.getElementById('demo')
    console.log('真实DOM',TDDM);
  //  debugger;
//    console.log(VDDM instanceof Object)
    /*
        关于虚拟DOM：
            1.本质是Object类型的对象(一般对象)
            2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
            3.虚拟DOM最总会被React转化为真实DOM 呈现在页面上
    */
</script>
</body>
</html>