虚拟DOM和真实DOM

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

03_虚拟 DOM 和真实 DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3_虚拟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">
      /* 此处一定要写babel */

      //1.创建虚拟DOM
      const VDOM = (
        /* 此处一定不要写引号, 因为不是字符串 */
        <h1 id="title">
          <span>Hello,React</span>
        </h1>
      );

      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));

      const TDOM = document.getElementById("demo");
      console.log("虚拟DOM", VDOM);
      console.log("真实DOM", TDOM); // <div id="demo"></div>
      // debugger;
      console.log(typeof VDOM); // object
      console.log(VDOM instanceof Object); // true
      /*
        关于虚拟DOM：
          1.本质是Object类型的对象(一般对象)
          2.虚拟DOM比较"轻", 真实DOM比较"重", 因为虚拟DOM是React内部在用, 无需真实DOM上那么多的属性.
          3.虚拟DOM最终会被React转化为真实DOM, 呈现在页面上.
      */
    </script>
  </body>
</html>
Prev: 虚拟DOM的两种创建方式 Next: jsx语法规则