3虚拟dom-真实dom

最新推荐文章于 2024-10-11 17:39:47 发布

前端小云儿

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量201

点赞数 2

分类专栏： react 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/142854712

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3虚拟dom-真实dom</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="test">
    </div>
    <script type="text/babel">
    // 1 创建虚拟dom jsx语法；可以使用标签嵌套；简单创建虚拟dom,原生的语法糖
    const Vdom =(
      <div>
        <h1>Hello,React</h1>
      </div>)
      const Tdom= document.getElementById('test')
    ReactDOM.render(Vdom,document.getElementById('test'))
    console.log('虚拟dom',ReactDOM)
    console.log('真实dom',Tdom)
    console.log('两个dom对比',typeof Tdom,typeof ReactDOM)
    /**
     * 1虚拟dom是一个object类型的对象；真实dom也是
     * 2虚拟dom比较轻量，真实dom属性多，因为虚拟dom只是react内部用，只关心有用的，其他不关心的不挂载。
     * 3虚拟dom最后回被react转化为真实dom呈现在页面上
    */
    </script>
  </body>
</html>