当前位置： 首页 > news >正文

React基础入门之虚拟Dom

news 文章来源：https://blog.csdn.net/weixin_46769087/article/details/132453624 2024/11/16 8:59:54

React官方文档：https://react.docschina.org/

说明

重要提示：本系列文章基础篇总结自尚硅谷课程，且采用类式写法！！最新的函数式组件写法见高级篇。

本系列文档旨在帮助vue同学更快速的学习react，如果你很熟悉vue，且想更好地了解react，建议从类式组件学起！

学习本教程之前，最好具备vue的基础知识，明白虚拟DOM、jsx这些前置知识。接下来，我们通过一个简单的示例来展示react的使用。

注意：入门的学习不会使用脚手架，而是使用html非框架写法

入门示例

下面展示一个最简单的react示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello_react</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="./js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="./js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

运行后的页面

引入的js文件作用

使用非框架的形式写react，我们需要引入三个js文件，如上面的示例：

  1. react.js： React核心库。
  2. react-dom.js： 提供操作DOM的React扩展库。
  3. babel.min.js： 解析JSX语法代码转为JS代码的库。

babel.js的作用

  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
  2. 只要用了JSX，都要加上type=“text/babel” , 声明需要babel来处理

虚拟DOM

react采用虚拟DOM的形式渲染页面

使用JSX创建虚拟DOM

//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>

渲染虚拟DOM(元素)

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)
  2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  3. 参数说明
参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

注意：react和react-dom的引入顺序不能写错！

创建虚拟DOM的两种方式

纯JS方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_使用js创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" > //1.创建虚拟DOM//const VDOM = React.createElement(标签名，标签属性，标签内容)const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

注：不用将jsx转为js，所以不需要引入babel

不使用jsx创建项目，明显需要写很多代码，非常麻烦！

JSX方式

JSX方式就是js创建虚拟DOM的语法糖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

注：当Vdom的内容是多行时，可以使用（）jsx包裹起来，表示一个整体。

虚拟DOM与真实DOM对比

打印输出虚拟DOM和真实DOM进行比较

<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="./js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="./js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">/* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1>; /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById("test"));const TDOM = document.getElementById("test");console.log("虚拟DOM", VDOM);console.info("真实DOM", TDOM);</script></body>

console.log(“虚拟DOM”, VDOM);

看看真实DOM身上有哪些属性

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

相关文章：

React基础入门之虚拟Dom

React官方文档&#xff1a;https://react.docschina.org/ 说明 重要提示&#xff1a;本系列文章基础篇总结自尚硅谷课程&#xff0c;且采用类式写法&#xff01;&#xff01;最新的函数式组件写法见高级篇。 本系列文档旨在帮助vue同学更快速的学习react&#xff0c;如果你很…...

编程日记 2023/8/24 6:13:58

C++基础Ⅰ编译、链接

目录儿 1 C是如何工作的1.1 预处理语句1.2 include1.3 main()1.4 编译单独编译项目编译 1.5 链接 2 定义和调用函数3 编译器如何工作3.1 编译3.1.1 引入头文件系统头文件自定义头文件 3.1.2 自定义类型3.1.3 条件判断拓展: 汇编 3.2 链接3.2.1 起始函数3.2.2 被调用的函数 3.3 …...

编程日记 2023/8/24 6:12:57

VMware和ubuntu配置Hadoop环境

目录 一、获取VMware安装包 1、官网获取 1&#xff09;首先先进入官网&#xff0c;官网首页是下面这样&#xff1a; 2&#xff09;接着点击产品选项 3&#xff09;进入后点击查看所有产品&#xff0c;然后在右上角选择排序方式为Z到A&#xff0c;然后向下滑动找到Workstation…...

编程日记 2023/8/24 6:11:56

uview2.0自定义tabbar

tabbar组件 <template><u-tabbar :value"tab" change"changeTab" :fixed"true" :border"true" :placeholder"true":safeAreaInsetBottom"true"><u-tabbar-item text"消息" icon"c…...

编程日记 2023/8/24 6:10:55

Star History 月度开源精选｜Llama 2 及周边生态特辑

7 月 18 日&#xff0c;Meta 发布了 Llama&#xff0c;大语言模型 Llama 1 的进阶版&#xff0c;可以自由免费用于研究和商业&#xff0c;支持私有化部署。 所以本期 Star History 的主题是&#xff1a;帮助你快速把 Llama 2 在自己机器上跑起来的开源工具&#xff0c;无论你的…...

编程日记 2023/8/24 6:09:54

修改电脑上路由表使笔记本默认走无线

如果笔记本上即连接了有线&#xff0c;也连接了无线&#xff0c;默认电脑会走有线的&#xff0c;通过route print命令查看路由表就可以看出来&#xff0c;因为无线的“metric”跳数要比有线的高 解决方法&#xff1a; 如果想实现让默认走无线&#xff0c;就需要修改自己电脑的…...

编程日记 2023/8/24 6:08:53

Spring Cache的介绍以及怎么使用（redis）

Spring Cache 文章目录 Spring Cache1、Spring Cache介绍2、Spring Cache常用注解2.1、EnableCaching注解2.2、CachePut注解2.3、CacheEvict注解2.4、Cacheable注解 3、Spring Cache使用方式--redis 1、Spring Cache介绍 Spring Cache是一个框架&#xff0c;实现了基于注解的缓…...

编程日记 2023/8/24 6:07:52

软考高级系统架构设计师系列论文六十九：论信息系统的安全风险评估

一、信息系统相关知识点 软考高级信息系统项目管理师系列之四十三：信息系统安全管理软考高级系统架构设计师：系统安全分析与设计...

编程日记 2023/8/24 6:06:51

Ubuntu系统安装之后首需要做的事情

Ubuntu系统的初步环境搭建 1、换源2、显卡3、浏览器4、输入法5、终端6、ROS7、VSCode8、设置时间与win一致9、 TimeShift10、 Anaconda&#xff08;考虑装不装&#xff09; 1、换源 点开Software&&Update&#xff0c;找到Ubuntu Software中的Download from&#xff0c…...

编程日记 2023/8/24 6:05:50

Qt——QPushButton控件的常见属性、方法和信号

Qt中QPushButton控件的常见属性、方法和信号 一、QPushButton控件常见属性 一、QPushButton控件常见方法 一、QPushButton控件常见信号 一、QPushButton控件常见属性&#xff08;Properties&#xff09; 1. text: 描述&#xff1a;按钮上显示的文本。 用法&#xff1a; butto…...

编程日记 2023/8/24 6:04:48

AUTOSAR规范与ECU软件开发(实践篇）5.5 基于ISOLAR-A的系统级设计与配置方法（上）

目录 前言 1 系统配置输入文件创建与导入 2、 Composition SWC建立 前言 如前所述， AUTOSAR支持整车级别的软件架构设计， 开发人员可以进行整车级别的软件组件定义， 再将这些软件组件分配到各个ECU中， 这就是AUTOSAR系统级设计需要完成的主要任务。 下面结合AUTOSAR方法论…...

编程日记 2023/8/24 6:03:47

mongoDB的CRUD

...

编程日记 2023/8/24 6:02:46

flutter TARGET_SDK_VERSION和android 13

config.gradle ext{SDK_VERSION 33MIN_SDK_VERSION 23TARGET_SDK_VERSION 33COMPILE_SDK_VERSION SDK_VERSIONBUILD_TOOL_VERSION "33.0.0"//兼容库版本SUPPORT_LIB_VERSION "33.0.0"}app/build.gradle里面的 defaultConfig {// TODO: Specify your…...

编程日记 2023/8/24 6:01:45

大数据Flink（六十六）：Flink的重要概念和小结

文章目录 Flink的重要概念和小结 一、​​​​​​​​​​​​​​数据流图（Dataflow Graph）...

编程日记 2023/8/24 6:00:44

Rider 添加NuGet软件包 (NuGet Package)

如图&#xff0c;在解决方案中选择自己的项目右键&#xff0c;点击管理 NuGet 软件包即可 在搜索栏中搜索自己要使用的软件包安装即可使用...

编程日记 2023/8/24 5:59:43

什么是JVM ？

一、JVM 简介 JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java 虚拟机。 虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机&#xff1a; JVM 、 VMwave 、 Virtual Box 。 JVM 和其他两个虚拟机的区别…...

编程日记 2023/8/24 5:58:41

【大数据】Hive 中的批量数据导入

Hive 中的批量数据导入 在博客【大数据】Hive 表中插入多条数据 中&#xff0c;我简单介绍了几种向 Hive 表中插入数据的方法。然而更多的时候&#xff0c;我们并不是一条数据一条数据的插入&#xff0c;而是以批量导入的方式。在本文中&#xff0c;我将较为全面地介绍几种向 H…...

编程日记 2023/8/24 5:57:39

【Modbus通信实验三】数据切片问题

在做两个串口相互通信的实验中&#xff0c;当发送频率快一点时偶尔会遇到以下情景&#xff0c;即一次send中把原数据拆成两份发送&#xff0c;就会导致CRC校验错误。下图中6字节数据拆成42是把SetRThreshold()阈值设为2&#xff0c;当设为1的情况下则会拆成51。 一开始以为是缓…...

编程日记 2023/8/24 5:56:38

记录《现有docker中安装spark3.4.1》

基础docker环境中存储hadoop3--方便后续查看 参考&#xff1a; 实践&#xff1a; export JAVA_HOME/opt/apache/jdk1.8.0_333 export SPARK_MASTER_IP192.168.0.220 export SPARK_WORKER_MEMORY4g export SPARK_WORKER_CORES2 export SPARK_EXECUTOR_MEMORY4g export HADOOP_H…...

编程日记 2023/8/24 5:55:38

【3ds Max】练习——制作衣柜

目录 步骤 一、制作衣柜顶部 二、制作衣柜门板 三、制作衣柜底部 四、制作柜子腿部 五、制作柜子底板 步骤 一、制作衣柜顶部 1. 首先创建一个平面&#xff0c;然后将图片素材拖入平面 2. 平面大小和图片尺寸比例保持一致 3. 单机鼠标右键&#xff0c;选择对象属性 勾选…...

编程日记 2023/8/24 5:54:37

Spring-MVC的数据响应-19

在访问服务端MVC的时候&#xff0c;这个controller层进行相应操作之后 他要做两件事&#xff1a;页面跳转和返回字符串&#xff0c;在做完这些操作之后&#xff0c;我们一般进行页面展示:排除页面展示之外&#xff0c;有些需求可能直接回写给我们一些数据&#xff1a; 页面跳…...

编程日记 2023/8/24 5:53:36

（三）行为模式：5、中介者模式（Mediator Pattern）（C++示例）

目录 1、中介者模式&#xff08;Mediator Pattern&#xff09;含义 2、中介者模式的UML图学习 3、中介者模式的应用场景 4、中介者模式的优缺点 &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 5、C实现中介者模式的实例 1、中介者模式&#xff08;Media…...

编程日记 2023/8/24 5:52:35

期权是什么?期权的优缺点是什么?

期权是一种合约&#xff0c;有看涨期权和看跌期权两种类型&#xff0c;也就是做多和做空两个方向&#xff0c;走势标的物对应大盘指数&#xff0c;这也是期权与其他金融工具的主要区别之一&#xff0c;可以用于套利&#xff0c;对冲股票和激进下跌的风险&#xff0c;下文介绍期…...

编程日记 2023/8/24 5:51:33

目标检测任务数据集的数据增强中，图像垂直翻转和xml标注文件坐标调整

需求&#xff1a; 数据集的数据增强中&#xff0c;有时需要用到图像垂直翻转的操作&#xff0c;图像垂直翻转后&#xff0c;对应的xml标注文件也需要做坐标的调整。 解决方法&#xff1a; 使用pythonopencvimport xml.etree.ElementTree对图像垂直翻转和xml标…...

编程日记 2023/8/24 5:50:32

html5提供的FileReader是一种异步文件读取文件中的数据

前言&#xff1a;FileReader是一种异步文件读取机制&#xff0c;结合input:file可以很方便的读取本地文件。 input:file 在介绍FileReader之前&#xff0c;先简单介绍input的file类型。 <input type"file" id"file"> input的file类型会渲染为一个按…...

编程日记 2023/8/24 5:49:30

Linux学习记录——이십오 多线程（2）

文章目录 1、理解原生线程库线程局部存储 2、互斥1、并发代码&#xff08;抢票&#xff09;2、锁3、互斥锁的实现原理 3、线程封装1、线程本体2、封装锁 4、线程安全5、死锁6、线程同步1、条件变量1、接口2、demo代码 1、理解原生线程库 线程库在物理内存中存在&#xff0c;也…...

编程日记 2023/8/24 5:48:29

单片机（二）使用位移 让灯亮

一&#xff1a;硬件电路 P2 口&#xff1a; P2.0~ P2.7 是这些 I0 口 LED 阳极接 电源 &#xff0c; P20 口 为低电平 可以让 LED灯 亮 二&#xff1a;软件实现部分 两种 ① 通过循环 来展示从左 到右 #include "reg52.h"#define LED_PORT P2 // 定义单片机的P2端…...

编程日记 2023/8/24 5:47:28

探究代理服务器在网络安全与爬虫中的双重作用

在如今高度互联的世界中&#xff0c;代理服务器已经成为网络安全和爬虫开发的关键工具。本文将深入探讨Socks5代理、IP代理、网络安全、爬虫、HTTP等关键词&#xff0c;以揭示代理服务器在这两个领域中的双重作用&#xff0c;以及如何充分利用这些技术来保障安全和获取数据。 …...

编程日记 2023/8/24 5:46:27

JavaWeb-学习目录

技术栈介绍 文章目录 1.数据库&#xff1a;1.1 Mysql1.2 JDBC1.3 Maven1.4 Mybatis 2.前端2.1 HTMLCSSJS2.2 AjaxVueElementUI 3. Web核心3.1 TomcatHttpServlet3.2 RequestResponse3.3 JSP3.4 CookieSession3.5 FilterListener 1.数据库&#xff1a; 1.1 Mysql mysql&#…...

编程日记 2023/8/24 5:45:26

C语言题目 - 调用qsort函数对数组进行排序

题目 如题 思路 其实没什么难的&#xff0c;只要严格按照 qsort 函数的参数来填充即可&#xff0c;这里要用到函数指针。 qsort 函数的原型如下&#xff1a; void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void *, const void *)); 参数说明&…...

编程日记 2023/8/24 5:44:25

做做网站2023下载/深圳市龙华区

一、体验环境使用设备&#xff1a;iPhone 6S操作系统&#xff1a;iOS 10.1.1产品版本&#xff1a;3.1.1操作时间&#xff1a;2018.1.13二、产品体验(一)战略层1.产品定位Slogan&#xff1a;得到——和你一起终身学习得到是一个知识付费型的线上知识学习平台&#xff1a;通过提供…...

编程日记 2024/11/16 7:29:34

政府门户网站建设管理/下载百度软件

1、吞吐率 简单的说吞吐率就是指在一指定时间内由一处传输到另一处或被处理的数据量。以太网吞吐率的单位为"兆比特每秒"或"Mb/s"。...

编程日记 2024/11/16 7:21:24

中医医院网站建设需求/网络推广网站有哪些

prefab可无限apply&#xff1a; 如果把一个模块做成了prefab&#xff0c;这个prefab可能在同一个scene中添加多个&#xff0c;甚至添加到了多个scene中。设所有这些实例为instance(1),instance(2),...,instance(n)&#xff0c;那么我们应该保证对于任何一个instance(i)来说&…...

编程日记 2024/11/16 6:04:26

睿艺美开封做网站/互联网舆情监控系统

定义&#xff1a; jquery > js的dom操作进行封装&#xff0c;简化了js操作　　//jquery就是把js封装成一个更简便的方法 jquery和js区别&#xff1a;找到元素&#xff0c;操作元素 只要看见 $ 符号就代表jquery&#xff0c;除非是自己定义了个方法 注意&#xff1a;想要用jq…...

编程日记 2024/11/16 3:44:09

网站设计怎么学/球队排名榜实时排名

一、方案一 使用一个可滑动的组件ScroolView包裹用于在内容超过显示区域后可滑动的布局。限制一个固定高度即可实现 <ScrollViewandroid:layout_width"match_parent"android:layout_height"match_parent"><LinearLayoutandroid:layout_width&qu…...

编程日记 2024/11/16 3:30:01

免费模板样机素材网站/安徽网站优化

前段时间编译安装的一个mplayer1.1版的播放器&#xff0c;播放文件没有声音&#xff0c;每次执行以下命令可以听&#xff0c;但一重启系统又不行了. #modprobe snd_pcm_oss #echo "et.x86 0 0 direct" > /proc/asound/card0/pcm0p/oss #mplayer gongxi.mp3 有一…...

编程日记 2024/11/16 1:03:36