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

React基础入门之虚拟Dom

news 2025/12/16 23:29:15

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/12/15 8:47:15

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/12/12 9:42:53

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/12/7 12:15:27

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/10 6:19:31

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/12/15 11:25:14

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/11/30 23:54:19

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/12/14 8:37:22

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/12/8 16:40:25