2.创建虚拟dom的两种方式

最新推荐文章于 2023-07-14 20:48:46 发布
最新推荐文章于 2023-07-14 20:48:46 发布
阅读量181 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24871849/article/details/111307883
版权

使用jsx语法创建虚拟dom

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- react核心库 -->
    <script type="text/javascript" src="package/react.development.js"></script>
    <!-- react操作dom的 -->
    <script type="text/javascript" src="package/react-dom.development.js"></script>
    <!-- 转码器 -->
    <script type="text/javascript" src="package/babel.min.js"></script>

</head>

<body>
    <div id="test"></div>
    <!-- 支持jsx语法 -->
    <script type="text/babel">
        // 创建虚拟dom
        const VDOM = <h1 id="title">
            <span>hello,react</span>
        </h1>
        // 渲染虚拟dom
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>

</body>

</html>

使用js方式创建虚拟dom

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- react核心库 -->
    <script type="text/javascript" src="package/react.development.js"></script>
    <!-- react操作dom的 -->
    <script type="text/javascript" src="package/react-dom.development.js"></script>
    <!-- 转码器 -->
    <!-- <script type="text/javascript" src="package/babel.min.js"></script> -->

</head>

<body>
    <div id="test"></div>
    <!-- 支持jsx语法 -->
    <script type="text/javascript">
        // 创建虚拟dom
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span','','hello react'));
        // 渲染虚拟dom
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>

</body>

</html>

总结

jsx是一个语法糖，最终会被babel翻译成js给浏览器执行。

sheerhr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
真实DOM和虚拟DOM
qq_40619263的博客
07-30 2121
文章目录如何高效操作DOM什么是DOM浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM虚拟DOM什么是虚拟DOM为什么要有虚拟DOM虚拟DOM的作用Vue中的虚拟DOM是如何实现的diff算法创建节点删除节点更新节点 如何高效操作DOM 什么是DOM DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口. 浏览器真实解析DOM的流程 为什么说操作DOM耗时 线程切换 浏览器包含渲染引擎（也称浏览器内核）和 JavaS
创建虚拟DOM的两种方式
qq_45679015的博客
12-21 799
需求：使用React创建以下标签 使用jsx创建虚拟DOM // 1.创建虚拟DOM const VDOM = <h1 id="title"><span>Hello React</span></h1>;//此处不要写引号，因为不是字符串// // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')); <!-- jsx创建虚拟DOM是js创建虚拟DOM的语法糖
1.react入门
qq_24871849的博客
12-17 107
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <!-- react核心库 --> <script type="text/javascript" src="package/react.development.js"></script> <
真实dom与虚拟dom的区别
weixin_59341573的博客
08-25 864
真实dom与虚拟dom区别
虚拟DOM的两种创建方式
weixin_44374938的博客
07-13 998
一、虚拟DOM的两种创建方式： 1.使用jsx创建虚拟DOM <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 先导入核心库再导入其他的库--> <script type="text/javascript" src="../js/oldVersion/react.development.js"></script> <!-- 引入react.dom 用
虚拟DOM和真实DOM的区别
qq_34639706的博客
08-05 310
虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）： 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实DOM频繁排版与重绘的效率是相当低的 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实...
构建一个虚拟 DOM
lio-zero 的博客
05-27 400
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 本文译自 How to write your own Virtual DOM，为了更好的理解 Virtual DOM 的基本概念，不增加其复杂性，它并没有设置 props...
React创建虚拟DOM的两种方式
weixin_53588068的博客
11-10 1699
第一种方式：使用js的方式创建 需要调用React.createElement()的方式进行创建。 React.createElement() 第一个参数：创建的标签； 第二个参数：标签的属性； 第三个参数：为第一个参数标签里的内容； <div id='test'></div> <script type="text/babel"> const vDom = React.createElement('h1',{id:'title'},'
深入理解Vue2.x的虚拟DOM diff原理
08-29
Vue2.x的虚拟DOM diff原理是指 Vue2.x 中的一种高效的渲染机制，它通过对比虚拟DOM和真实DOM之间的差异来实现快速渲染。下面我们将深入了解 Vue2.x 的虚拟DOM diff原理。 虚拟DOM的定义 在 Vue2.x 中，虚拟DOM是...
react虚拟DOM的两种创建方式
qq_60976312的博客
06-22 233
react虚拟DOM的两种创建方式
react技术全家桶（3）虚拟DOM的两种创建方式
weixin_41380194的博客
01-16 210
1.react 为啥要用jsx？ 1.首先看看使用js创建虚拟DOM //1.创建虚拟DOM //document.createElement是创建真实DOM的 //React.createElement(标签名，标签属性，标签体内容)是创建虚拟DOM的 const VDOM = React.createElement(‘h1’,{id:‘title’},‘Hello React’);、 注意： 源码： 1-使用jsx创建虚拟DOM
Vue虚拟dom是如何被创建的
yyds2026的博客
11-14 103
是在编译过程中会把那些不会变的静态节点打上标记，设置为。有了，那真正的渲染函数在哪呢？上挂载了两个方法，一个服务于用户手写的。方法使用的实际上就是我们自定义的。本身的屠特殊标签，并且最后有。节点进行替换,该方法将会拿到。的过程中会被调用生成一个。那么我们这一章就来讲。那么我们来看一看生成的。方式，但是该方法最终在。函数，也就是说，最终供。函数的作用是什么呢？我们可以看到有无限个。三次锤炼讲完了，那么。向vue原型上挂载了。
虚拟DOM和实际的DOM有何不同？
前端全栈开发者
10-27 3113
在本文我们会先聊聊 DOM 的一些缺陷，然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的，最后再站在双缓存和 MVC 的视角来聊聊虚拟 DOM。理解了这些会让你对目前的前端框架有一个更加底层的认识，这也有助于你更好地理解这些前端框架。 1. DOM 的缺陷 JavaScript 操纵 DOM 是会影响到整个渲染流水线的，另外，DOM 还提供了一组 JavaScript 接口...
实现一个简单的虚拟DOM
风雨无阻，执着追求!!!
09-22 933
原文地址：http://www.cnblogs.com/giggle/p/7538533.html 现在的流行框架，无论React还是Vue，都采用虚拟DOM。 好处就是，当我们数据变化时，无需像Backbone那样整体重新渲染，而是局部刷新变化部分，如下组件模版： ul class="list"> li>item1li> li>item2li> ul> 当页面
虚拟DOM和真实DOM的区别和联系
xiaomao_wxj的博客
11-01 2803
虚拟DOM和真实DOM区别和联系
React 学习笔记（3）：虚拟 DOM 的两种创建方式
f18855666661的博客
02-11 576
方式一：使用 jsx 创建。 <script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getEl
什么是虚拟DOM与真实DOM，他们的区别
最新发布
yzwlogo的博客
07-14 1070
虚拟DOM（Virtual Document Object Model）是指用JS对象来描述DOM节点及其属性和内容的层次结构，它是对真实DOM的一种抽象表示，并不是真正的DOM节点。当页面需要更新时，虚拟DOM首先进行比较，找出需要更新的部分，然后批量更新至真实DOM，最终只会引起页面的局部重排和重绘，可以减少页面渲染的开销，提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值