其他分享
首页 > 其他分享> > React中的虚拟DOM与真实DOM

React中的虚拟DOM与真实DOM

作者:互联网

React中的虚拟DOM与真实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>03 虚拟DOM与真实DOM</title>
</head>

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

  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom 用于支持react操作DOM-->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将JSX 转换为 JS -->
  <script src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 此处一定要写babel */
      // 第一步 创建虚拟DOM
      var VDOM = ( /* 此处一定不要写引号 */
        <h1 id="title">
          <span>HELLO React</span>
        </h1>
      )
      // 第二步 渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));

      const TDOM = document.getElementById('demo')
      console.log('虚拟DOM',VDOM);
      console.log('真实DOM',TDOM);
      debugger;
    </script>
</body>

</html>

上述代码中的输出内容如下

image-20210417184051079

总结:

关于虚拟DOM

     	 1. 本质是Object类型的对象(一般对象)
         2.  虚拟DOM比较“轻”,真实DOM比较“重”,原因是虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
         3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上。

标签:真实,log,DOM,React,虚拟,VDOM
来源: https://blog.csdn.net/qq_49002903/article/details/115799647