虚拟DOM的两种创建方式

最新推荐文章于 2024-04-30 09:00:00 发布

种草小妖儿.

最新推荐文章于 2024-04-30 09:00:00 发布

阅读量328

点赞数

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

本文链接：https://blog.csdn.net/S2763427717/article/details/131252759

版权

React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

使用jsx创建

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

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作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 VDom = (
            <h1 id='title'>
                <span>Hello,React</span> 
            </h1>
        )
        // 2.渲染虚拟dom到页面
        ReactDOM.render(VDom,document.getElementById('test'))
    </script>
</body>
</html>

使用js创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_使用js创建虚拟dom</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <script type="text/javascript">
        // 1.创建虚拟dom
        const VDom = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,react'))
        // 2.渲染虚拟dom到页面
        ReactDOM.render(VDom,document.getElementById('test'))
    </script>
</body>
</html>

综上所述： jsx会被babel转换成js

虚拟dom与真实dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟dom与真实dom</title>
</head>
<body>
    <!-- 容器 -->
    <div id="test"></div>
    <div id="demo"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作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 VDom = (
            <h1 id='title'>
                <span>Hello,React</span> 
            </h1>
        )
        // 真实dom
        const Tdom = document.getElementById('demo')
        // 2.渲染虚拟dom到页面
        ReactDOM.render(VDom,document.getElementById('test'))

        console.log('虚拟dom',VDom);
        console.log('真实dom',Tdom);
        debugger;
        console.log(typeof VDom);
        console.log(VDom instanceof Object);

        /*
         * 虚拟dom
         * 1.本质是object类型的对象（一般对象）
         * 2.虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom是react内部在用，无需真实dom上那么多的属性。
         * 3.虚拟dom最终会被react转化为真实dom,呈现在页面上。
        */

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