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

React基础入门之虚拟Dom

news 2026/3/29 10:36:10

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

保姆级教程：SenseVoiceSmall多语言语音识别快速部署与情感检测实战

保姆级教程&#xff1a;SenseVoiceSmall多语言语音识别快速部署与情感检测实战 1. 环境准备与快速部署 1.1 系统要求与依赖安装 在开始之前&#xff0c;请确保你的系统满足以下基本要求&#xff1a; 操作系统&#xff1a;Linux (推荐 Ubuntu 20.04) 或 Windows WSL2Python版…...

编程新知 2026/3/29 8:11:40

YOLO X Layout模型测试：基于Pytest的自动化测试框架

YOLO X Layout模型测试&#xff1a;基于Pytest的自动化测试框架 当你辛辛苦苦训练或部署了一个YOLO X Layout模型&#xff0c;准备用它来解析合同、发票或者学术论文时&#xff0c;最怕遇到什么&#xff1f;不是模型本身不够强大&#xff0c;而是某次代码更新后&#xff0c;它…...

编程新知 2026/3/29 6:20:24

实战指南：基于快马生成tomcat生产级配置，涵盖https、集群与性能调优

今天想和大家分享一个实战经验&#xff1a;如何在生产环境中配置Tomcat服务器。作为一个长期和Tomcat打交道的开发者&#xff0c;我深知生产环境配置和本地开发环境的巨大差异。最近在InsCode(快马)平台上实践了一套完整的配置方案&#xff0c;效果很不错&#xff0c;这里把关键…...

编程新知 2026/3/29 6:06:22

手把手教你用超级千问语音设计世界制作游戏剧情配音

手把手教你用超级千问语音设计世界制作游戏剧情配音 1. 为什么游戏开发者需要语音设计工具 在游戏开发过程中&#xff0c;配音往往是最容易被忽视却又至关重要的环节。传统配音方式面临三大痛点&#xff1a; 成本高昂&#xff1a;专业配音演员费用动辄上千元每分钟效率低下&…...

编程新知 2026/3/29 5:50:06

Vite 8 架构革新：从双引擎到 Rolldown 统一打包的演进之路

1. Vite 8 架构革新的背景与痛点 如果你用过 Vite 7 或更早版本&#xff0c;一定对它的闪电般开发体验印象深刻。这主要得益于 Vite 独特的双引擎架构&#xff1a;开发时用 esbuild 实现毫秒级启动&#xff0c;生产环境则用 Rollup 保证打包质量。但我在实际项目中发现&#xf…...

编程新知 2026/3/29 5:44:05

C++ STL 容器内存管理机制

C STL容器内存管理探秘 在C开发中&#xff0c;STL&#xff08;标准模板库&#xff09;容器是高效数据处理的基石&#xff0c;其背后的内存管理机制直接影响程序性能与资源利用率。理解容器如何动态分配、释放内存&#xff0c;不仅能避免内存泄漏和碎片化问题&#xff0c;还能优…...

编程新知 2026/3/29 5:23:58

Phi-3-Mini-128K实操手册：模型加载耗时优化技巧——分层加载与缓存机制应用

Phi-3-Mini-128K实操手册&#xff1a;模型加载耗时优化技巧——分层加载与缓存机制应用 1. 项目概述 Phi-3-Mini-128K是基于微软Phi-3-mini-128k-instruct模型开发的轻量化对话工具&#xff0c;专为本地部署和高效推理场景设计。该工具通过多项技术创新&#xff0c;显著提升了…...

编程新知 2026/3/29 5:11:49

FastMoss TikTok电商数据爬取实战：JS逆向与MD5签名破解

1. FastMoss TikTok电商数据爬取的核心挑战 最近在研究FastMoss平台的TikTok电商数据爬取&#xff0c;发现最大的难点在于请求签名加密。当你访问https://www.fastmoss.com/zh/e-commerce/saleslist这个页面时&#xff0c;切换周榜会触发一个带有fm-sign签名的加密请求。这个签…...

编程新知 2026/3/29 4:35:20

Z-Image-Turbo孙珍妮LoRA模型部署教程：支持WebP/AVIF新格式输出

Z-Image-Turbo孙珍妮LoRA模型部署教程&#xff1a;支持WebP/AVIF新格式输出 1. 引言&#xff1a;快速上手明星风格AI绘图 想用AI生成特定明星风格的图片吗&#xff1f;今天给大家介绍一个非常实用的工具——基于Z-Image-Turbo的孙珍妮LoRA模型。这个模型专门针对孙珍妮的风格…...

编程新知 2026/3/29 2:46:13

【AI智能体实战】基于Dify构建自然语言数据库查询系统的全流程解析

1. 为什么需要自然语言查询数据库&#xff1f; 想象一下这个场景&#xff1a;市场部的同事小王需要从公司数据库里找出"去年销售额超过100万且退货率低于5%的客户名单"。如果他不会写SQL&#xff0c;要么得找IT部门帮忙&#xff0c;要么得花半天时间导出Excel手动筛选…...

编程新知 2026/3/29 2:36:11