【react】虚拟DOM的两种创建方式

最新推荐文章于 2024-03-21 22:39:09 发布

落雪小轩韩

最新推荐文章于 2024-03-21 22:39:09 发布

阅读量618

点赞数 2

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

本文链接：https://blog.csdn.net/m0_46613429/article/details/128299628

版权

react 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1、使用js创建虚拟DOM

<body>
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script 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>

2、使用jsx创建虚拟DOM

<body>
  <div id="test"></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">
    const VDOM = (
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</body>

3、虚拟DOM和真实DOM的区别

const TDOM = document.getElementById('test')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);

在这里插入图片描述

关于虚拟DOM：
1、本质是Object类型的对象（一般对象）
2、虚拟DOM比较“轻“（属性比较少），真实DOM比较”重“，因为虚拟DOM是React内部在使用，无需真实DOM上那么多的属性
3、虚拟DOM最终会被React转化为真实DOM，呈现在页面上

落雪小轩韩

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【react】虚拟DOM的两种创建方式

虚拟DOM的两种创建方式
复制链接

扫一扫

专栏目录

【react】虚拟DOM的两种创建方式

“相关推荐”对你有帮助么？