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

React基础入门之虚拟Dom

news 2025/7/17 7:14:31

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

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/7/14 8:18:25

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/7/16 16:30:53

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/7/9 5:33:00

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/7/17 1:57:52

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

编程新知 2025/7/14 11:41:38

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/7/6 20:38:30

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

编程新知 2025/7/13 10:03:49

统计学（第8版）——统计抽样学习笔记（考试用）

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

编程新知 2025/7/5 5:09:01