react虚拟Dom的使用与真实Dom的比较

最新推荐文章于 2024-11-02 15:48:17 发布

余生tt

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量101

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63135041/article/details/129408644

版权

文章介绍了如何在项目中引入React依赖，通过创建并渲染虚拟DOM来展示React的基本用法。jsx语法用于创建虚拟DOM对象，Babel则将jsx编译成JavaScript。虚拟DOM是一个对象，不同于实际的DOM，但最终会被转换为真实DOM并渲染到页面上。

摘要由CSDN通过智能技术生成

react虚拟对象的使用

1.引入依赖包

1.1：依赖包下载（百度网盘）

链接：https://pan.baidu.com/s/19hie5dOGJLn2JNQL83Bkkw?pwd=4136
提取码：4136

1.2：下载好后放到项目路径下（建议用一个文件夹存放）
在这里插入图片描述

1.3：引入依赖

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

2.使用react创建虚拟对象

2.1：创建并渲染

  <div id="test"></div>

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

    <!-- 由于我们要使用babel 所以type属性设置为 text/babel -->
    <script type="text/babel">
        //创建虚拟dom
        const VDOM=<h1>hello,react</h1>
        //渲染虚拟dom到页面指定标签内
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

2.2：打开浏览器查看效果

在这里插入图片描述

2.3：注:

 const VDOM=<h1>hello,react</h1>

这个是jsx的写法，可以让你创建react虚拟对象更加方便

但是浏览器只能识别js,使用我们需要batel编译

 <script type="text/babel">
     //在这里面可以用jsx的写法
     </script>

3.虚拟Dom和真实Dom的区别

3.1控制台输出真实Dom和虚拟Dom

 //创建虚拟dom
        const VDOM=<h1 id="title">hello,react</h1>
		console.log(VDOM);//控制台输出
        console.log(document.getElementById('test'));//真实dom