react学习笔记——2. 虚拟dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39056803/article/details/132249974

本文介绍了如何在jsx中为虚拟dom添加id属性，同时对比了jsx与js创建虚拟dom的方法。指出jsx简化了创建过程，提供更美观的代码结构，是js的语法糖。还解释了虚拟dom的基本概念和与真实dom的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么使用jsx

虚拟dom的创建方式有两种，这里新加一个需求，要求虚拟dom包含id属性。

通过jsx，也就是之前的方式，只不过初始化虚拟dom的时候需要加一个id属性。
通过js，这种方式不需要babel，初始化时的代码如下，使用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>2_使用js创建虚拟dom</title>
</head>

<body>
    <!-- 准备一个“容器” -->
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>

    <script>
        /**
         * 步骤：
         *      1、创建虚拟dom
         *      2、渲染虚拟dom到页面
        */
        // 1、创建虚拟dom，使用React的createElement方法进行创建，createElement有两个参数，第一个是标签名，第二个是标签属性，第三个是标签内容
        const VDOM = React.createElement('h1', { id: 'title' }, 'hello react')
        // 2、渲染虚拟dom，使用render方法，此方法有两个参数，一个是虚拟dom，第二个是容器，并且此方法是一个追加的过程
        ReactDOM.render(VDOM, document.getElementById("test"))
        /**
         * 注意，只有这里需要document，因为react不需要自己操作dom，这里只是一个demo
        */
    </script>
</body>

</html>

但是如果要求在h1中不直接写hello react，而是加一个span标签。将hello react写在span中，则此时通过js实现时，第三个参数需要重新初始化一个虚拟标签span。则创建虚拟dom代码如下

const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello react'))

而通过jsx是非常容易的。因此，jsx只是为了解决一个问题，就是创建虚拟dom太繁琐了。并且，jsx在书写时，可以通过小括号将html代码括起来，从而将代码整理成html的结构形式，更加美观一些。代码如下

let VDOM = (
    <h1 id="title">
        <span>
            hello,react!
        </span>
    </h1>
)

其实babel就是将jsx转换成了js的形式，只不过这个代码不需要我们写，我们写的都是简单的代码。因此jsx就是js的语法糖，是js的一种简写方式。

虚拟dom是什么？

本质就是Object对象（一般对象），可以通过console.log(VDOM)进行打印，可以通过console.log(typeof VDOM)查看类型，可以通过console.log(VDOM instanceof Object)进行判断
与虚拟dom比较轻，有极少的属性。主要原始是虚拟dom是react内部使用，不需要想真实dom那么多的属性
虚拟dom最终会被react转化为真实dom，呈现在页面上。

<!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>3_虚拟dom与真实dom比较</title>
</head>

<body>
    <!-- 准备“容器” -->
    <div id="test"></div>
    <div id="demo"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        let VDOM = (
            <h1 id="title">
                <span>
                    hello,react!
                </span>
            </h1>
        )
        ReactDOM.render(VDOM, document.getElementById("test"))

        console.log("虚拟dom", VDOM)
        console.log("虚拟dom类型", typeof VDOM)
        console.log("虚拟dom与object比较", VDOM instanceof Object)
        console.log('------------')
        const TDOM = document.getElementById("demo")
        console.log("真实dom", TDOM)
        // 查看真实dom上的属性，可以通过debugger来查看
        debugger;

    </script>
</body>

</html>