react学习——02虚拟dom创建的两种方式

1、使用jsx创建虚拟DOM

const vdom = <h1 id="title" className="red"><span>helloReact</span></h1> /*此处一定不要写引号*/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_使用jsx创建虚拟DOM</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*///1.创建虚拟DOMconst vdom = <h1 id="title" className="red"><span>helloReact</span></h1> /*此处一定不要写引号*///2.渲染虚拟DOM到页面ReactDOM.render(vdom,document.getElementById('root'))
</script>
</body>
</html>

2、使用js创建虚拟DOM

const vdom = React.createElement('h1',{id:'title',className:'red'},React.createElement('span',{},'hello,react'))
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2_使用js创建虚拟DOM</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript">//1.创建虚拟DOMconst vdom = React.createElement('h1',{id:'title',className:'red'},React.createElement('span',{},'hello,react'))//2.渲染虚拟DOM到页面ReactDOM.render(vdom,document.getElementById('root'))
</script>
</body>
</html>

jsx创建虚拟DOM更加方便代码量更少

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30626.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【八股系列】点击一个按钮,浏览器会做些什么事情【呈现效果时流程】?(js)

文章目录 1. 事件的启程&#xff1a;捕获与目标识别2. 核心环节&#xff1a;事件处理与JavaScript的魔法2.1. 识别事件源&#xff1a;2.2. 查找事件监听器&#xff1a;2.3. 执行JavaScript代码&#xff1a; 3. 视觉重塑&#xff1a;UI的更新之旅4. 事件的回响&#xff1a;冒泡与…

pip下载越来越慢,需要怎么提速了?

pip下载慢通常是因为默认的Python包索引服务器在国外&#xff0c;国内访问受到网络限制。 为了解决这个问题&#xff0c;可以尝试以下几种方法来提高pip下载速度&#xff1a; 更换镜像源&#xff1a; 中国科技大学、清华大学等国内高校提供了Python包索引的镜像&#xff0c;你…

数据丢失?别怕,EasyRecovery来帮忙!

&#x1f31f; 数据丢失&#xff1f;别怕&#xff0c;EasyRecovery来帮忙&#xff01; 嘿&#xff0c;亲爱的的朋友们&#xff01;&#x1f44b;今天我要和大家分享一款超棒的数据恢复软件——EasyRecovery&#xff01;&#x1f389;你是否曾经遇到过不小心删除了重要文件、照片…

深入理解微服务架构 - Spring Cloud

目录 一 Spring Cloud概述 什么是Spring Cloud? 为什么选择Spring Cloud? 二 Spring Cloud的核心组件 Spring Cloud Config 概述 工作原理 示例代码 Spring Cloud Netflix Eureka 概述 工作原理 示例代码 Spring Cloud Ribbon 概述 工作原理 示例代码 Sprin…

支持向量机介绍

一、引言 1.支持向量机&#xff08;SVM&#xff09;的概念和背景 支持向量机&#xff08;Support Vector Machine&#xff0c;简称SVM&#xff09;是一种起源于统计学习理论的分类和回归算法。20世纪60年代&#xff0c;Vapnik等人提出了支持向量机理论&#xff0c;该理论基…

zip文件上传到linux服务器文件大小发生变化

在传一个文件到服务器的时候&#xff0c;第一次传完看见大小不一样&#xff08;服务器中du命令查看大小796596MB&#xff09;就重传了一下&#xff0c;还是大小不一样&#xff0c;就查了下。 查了下有以下原因&#xff1a; 文件系统的不同&#xff1a; 原因&#xff1a;不同的…

双色球预测算法(Java),——森林机器学习、时间序列

最近AI很火&#xff0c;老想着利用AI的什么算法&#xff0c;干点什么有意义的事情。其中之一便想到了双色球&#xff0c;然后让AI给我预测&#xff0c;结果基本都是简单使用随机算法列出了几个数字。 额&#xff0c;&#xff0c;&#xff0c;&#xff0c;咋说呢&#xff0c;双…

leetcode232用栈实现队列

本文主要讲解用栈实现队列的要点与细节&#xff0c;按照步骤思考更方便理解&#xff0c;同类型队列实现栈 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; vo…

windows 系统根据端口查找进程,杀死进程

在启动项目时&#xff0c;往往设置的端口被占用&#xff0c;这时需要杀死端口所占用的进程&#xff0c;然后再重启项目。 netstat -ano | findstr :8085 taskkill /F /PID 25184 杀死进程后&#xff0c;再执行命令 netstat -ano | findstr :8085 进行查看端口占用情况

STM32多功能交通灯系统:从原理到实现

一、功能说明 本交通灯系统采用先进的stm32f103c8t6微处理器为核心控制单元。系统设置东南西北四个方向各配置两位数码管&#xff0c;用以精准展示5至99秒的时间范围&#xff0c;并且允许用户根据实际需求进行灵活调整。 在信号灯配置方面&#xff0c;每个方向均配备左转、直…

SYD881X读取GATT VALUE的长度

SYD881X读取GATT VALUE的长度 现在具体遇到这样一个需要&#xff0c;机器生产后要更新profile&#xff0c;这个只能够通过升级4K来做&#xff0c;但是需要知道profile是否改变了&#xff0c;这个就要知道profile是否改变来决定是否要升级&#xff0c;这里的做法是增加一个函数&…

肩背筋膜炎怎么治疗最有效

肩背筋膜炎是一种常见的肌肉骨骼疾病&#xff0c;其症状主要包括&#xff1a;肩背区域疼痛&#xff1a;由于筋膜组织受到损伤&#xff0c;肩背部位会出现明显的疼痛&#xff0c;疼痛可能会放射到周围的其他部位&#xff0c;严重时会影响睡眠和休息。肌肉紧张和僵硬&#xff1a;…

嵌入式数据库_2.嵌入式数据库的一般架构

嵌入式数据库的架构与应用对象紧密相关&#xff0c;其架构是以内存、文件和网络等三种方式为主。 1.基于内存的数据库系统 基于内存的数据库系统中比较典型的产品是每个McObject公司的eXtremeDB嵌入式数据库&#xff0c;2013年3月推出5.0版&#xff0c;它采用内存数据结构&…

智能座舱中的HUD介绍

HUD&#xff08;Head Up Display&#xff0c;抬头显示系统&#xff09;是将车速、油耗、胎压等行车重要信息投影到前方挡风玻璃上的一套显示系统。HUD 最早应用在战斗机上&#xff0c;旨在降低飞行员低头查看仪表的频率&#xff0c;使得飞行员能在保证正常驾驶的同时&#xff0…

2002-2022年各省人口总抚养比数据(人口抽样调查)

2002-2022年各省人口总抚养比数据&#xff08;人口抽样调查&#xff09; 1、时间&#xff1a;2002-2022年 2、指标&#xff1a;总抚养比 3、来源&#xff1a;国家统计局、统计年鉴 4、范围&#xff1a;31省&#xff0c; 5、缺失情况&#xff1a;无缺失&#xff0c;其中201…

Git 和 TortoiseGit 安装和配置(图文详解)

使用git&#xff0c;需要在Windows上需要安装两个软件&#xff1a;1&#xff09;Git 2&#xff09;TortoiseGit 注意&#xff1a;tortoiseGit是在安装了Git的基础上运行的&#xff0c;所以需要先安装Git&#xff0c;后安装运行tortoiseGit。 因为&#xff0c;运行TortoiseGi…

10个方面分析Dubbo和SpringCloud有什么区别

Dubbo 和 Spring Cloud 都是微服务架构中非常流行的服务治理框架&#xff0c;但它们在多个方面存在区别&#xff1a; 1. 核心要素和开发成本&#xff1a;Spring Cloud 在开发过程中通过整合子项目可以顺利完成组件融合&#xff0c;而 Dubbo 需要通过实现各种 Filter 进行定制&…

李光明从程序员到架构师的逆袭之路(五)

来上海已经是第六天了&#xff0c;春天的气息在这座繁华都市中渐渐弥漫。我的同学张攀&#xff0c;一个勤奋且才华横溢的小伙子&#xff0c;昨天兴奋地告诉我们&#xff0c;他收到了浦东一家外包公司的offer&#xff0c;月薪高达8500块。你能想象他当时的喜悦吗&#xff1f;他的…

C/S结构应用程序与B/S结构应用程序的主要区别

1.B/S结构 1.1B/S概念&#xff1a; &#xff08;Brower/Server,浏览器/服务器&#xff09;模式又称B/S结构&#xff0c;是Web兴起后的一种网络结构模式。Web浏览器是客户端最主要的应用软件。 这种模式统一了客户端&#xff0c;将系统功能实现的核心部分集中到服务器上&#x…

高效记忆方法的原理与应用

高效记忆方法的原理与应用 前言记忆的基本类型与特点短时记忆长时记忆 影响记忆效果的因素记忆者本身记忆方法与场景记忆内容本身 高效记忆的原则遵循记忆的偏好信息精简与提炼信息联结与转化调动多种感官从感兴趣的内容开始保持身体健康与精力充沛 常见的高效记忆方法信息联结…