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

React 全栈体系（一）

news 2026/2/10 0:03:08

第一章 React入门

一、React简介

1. 是什么？

是一个将数据渲染为HTML视图的开源JavaScript库。

2. 谁开发的？

由Facebook开源

3. 为什么要学？

原生JavaScript操作DOM繁琐，效率低（DOM-API 操作 UI）
使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排
原生JS没有组件化编码方案，代码复用低

4. React的特点

采用组件化模式，声明式编码，提高开发效率及组件复用率
在React Native中可以使用React语法进行移动端开发
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

请添加图片描述

5. React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
DOM Diffing算法, 最小化页面重绘。

二、React的基本使用

1. 效果

请添加图片描述

2. 相关js库

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

<!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>

3. 创建虚拟DOM的两种方式

请添加图片描述

纯JS方式(一般不用)
JSX方式

<!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>

<!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.创建虚拟DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

4. 虚拟DOM与真实DOM

4.1 React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象

4.2 虚拟DOM对象最终都会被React转换为真实的DOM

4.3 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_虚拟DOM与真实DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><div id="demo"></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'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* 关于虚拟DOM：1.本质是Object类型的对象（一般对象）2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。*/</script>
</body>
</html>

三、React JSX

1. 效果

在这里插入图片描述

2. JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟DOM
- 写法：var ele = <h1>Hello JSX!</h1>
- 注意1：它不是字符串, 也不是HTML/XML标签
- 注意2：它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
babel.js的作用
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</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" >const myId = 'aLeX'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。*/</script>
</body>
</html>

请添加图片描述

3. 渲染虚拟DOM(元素)

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

4. JSX练习

需求: 动态展示如下列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</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" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

请添加图片描述

四、模块与组件、模块化与组件化的理解

1.模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用js, 简化js的编写, 提高js运行效率

2. 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

3. 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

请添加图片描述

React 全栈体系（一）

第一章 React入门一、React简介 1. 是什么？ 是一个将数据渲染为HTML视图的开源JavaScript库。 2. 谁开发的？ 由Facebook开源 3. 为什么要学？ 原生JavaScript操作DOM繁琐，效率低（DOM-API 操作 UI） 使…...

编程日记 2023/8/16 1:05:39

SpringBoot代理访问本地静态资源400 404

SpringBoot代理访问静态资源400 404 背景：pdf文件上传到linux服务器上，使用SpringBoot代理访问问题：访问过程中可能会出现400、404问题前提：保证有文件，并且文件路径正确 SpringBoot如何配置静态资源代理&#xff0…...

编程日记 2023/8/16 1:04:38

Java导出数据到Excel

系列文章目录文章目录系列文章目录前言一、为什么需要导出数据到Excel？二、使用Java导出数据到Excel的步骤1.添加依赖2.编写导出逻辑3.运行测试总结前言当今数据处理的场景中，Excel仍然是一个不可或缺的工具，用于存储、分析和共享数据。在Java应用程序中，有时候需要将数…...

编程日记 2023/8/16 1:03:35

IDEA常用设置与maven项目部署

目录前言一、Idea是什么二、Idea的优点三、Idea的常用设置主题设置设置鼠标悬浮提示忽略大小写提示自动导包取消单行显示Tabs 设置字体配置类文档注释信息模版设置文件编码设置自动编译水平或者垂直显示代码快捷方式改成eclipse 设置默认浏览器…...

编程日记 2023/8/16 1:02:33

想学好网络技术，这一张纸就够了

大家好，我是老杨。马上又到一年一度的大学新生入学季，今年更多家长都给孩子们报了计算机相关专业。要知道啊，这个计算机专业包含的方向贼多，什么网络工程、软件工程、信息安全、物联网工程、传感网技术、通信工程与电子信息之…...

编程日记 2023/8/16 1:01:32

list的使用和模拟实现

目录 1.list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 2.为什么使用迭代器？ 3.list的模拟实现 3.1完整代码 3.2代码解析 4.list与…...

编程日记 2023/8/16 1:00:30

Kubernetes 部署DolphinScheduler 创建租户失败

创建租户报错创建租户失败。后台日志如下源代码跟踪 org.apache.dolphinscheduler.api.service.impl.TenantServiceImpl / if hdfs startup if (PropertyUtils.getResUploadStartupState()) {createTenantDirIfNotExists(tenantCode); }需要将 resource.storage.type 置为…...

编程日记 2023/8/16 0:59:25

uniapp 获取 view 的宽度、高度以及上下左右左边界位置

<view class"cont-box"></view> /* 获取节点信息的对象 */ getElementRect() {const query uni.createSelectorQuery().in(this);query.select(".cont-box").boundingClientRect(res > {console.log(res);console.log(res.height); // 10…...

编程日记 2023/8/16 0:58:23

财务数据分析之现金流量表模板分享

现金流量表是我们常说的财务数据分析三表之一。它可以呈现一个企业的现金流情况，揭示企业经营管理健康状态，但在实际使用中却有总给人一种用不上、用不好的矛盾感。怎么才能把现金流量表做好？不如借鉴下大神的现金流量表模板。下面介绍的是…...

编程日记 2023/8/16 0:57:22

日常BUG——通过命令行创建vue项目报错

😜作者：是江迪呀✒️本文关键词：日常BUG、BUG、问题分析☀️每日一言 ：存在错误说明你在进步！ 一、问题描述在使用vue命令行创建一个vue项目时，出现一下的错误： vue create my…...

编程日记 2023/8/16 0:56:21

CSS3 新特性

圆角阴影文字阴影线性渐变变换（transform）背景rgba伪元素：伪类伪元素区别动画（animate）...

编程日记 2023/8/16 0:55:20

微信记录---推荐系统---23/8/14 小总结

推荐系统---23/8/14 小总结 1. ACM推荐系统专题研讨会2.图神经网络推荐系统3.表1 模型效果对标：MovieLens 1M4.爬虫技术5.TF-IDF算法6.图 2 海量学术大数据推荐系统技术架构7.图 4 CADAL 平台推荐系统框架设计8.企业推荐系统发展概述MLR(Mixed Logistic Regression)DIEN(Deep…...

编程日记 2023/8/16 0:54:18

学习笔记整理-正则表达式-01-认识正则

一、基本认识 1. 什么是正则表达式正则表达式(regular expression)描述了字符串"构成模式"，经常被用于检查字符串是否符合预定的格式要求。用一个例子快速演示正则表达式基本使用方法：检查某个字符串是否是6位数字 // 要检查的字符串va…...

编程日记 2023/8/16 0:53:16

windows10/11 修改docker镜像存储目录

windows10/11 修改docker镜像存储目录 windows10/11 修改docker镜像存储目录查看docker的状态关闭所有正在运行的实例导出WSL子系统镜像注销现有的wsl重新创建wsl系统 windows10/11 修改docker镜像存储目录 docker默认pull的镜像在c盘，随着镜像的增加，C…...

编程日记 2023/8/16 0:52:14

AI黑马挑战赛，探索研发新趋势丨IDCF

随着AI的出现，获取知识的成本大幅降低，当DevOps与AI相结合时，必将产生全新的化学反应。不断涌现的AI新工具提醒我们，一个全新的研发工作范式正在逐渐形成。而DevOps的核心理念是敏捷协同，作为工程师，如何通…...

编程日记 2023/8/16 0:51:12

关于onload事件

onload事件是在网页中的所有内容（包括图片、样式表、脚本等）都加载完成后触发的事件。它常用于在页面加载完成后执行一些操作，例如初始化页面元素、绑定事件监听器等。可以通过以下方式来使用onload事件： 在HTML标签中直接添加…...

编程日记 2023/8/16 0:50:12

合并单元格

需求： 合并相同名称的产品先说下elementUI合并单元格的方法，先计算好要合并的行数rowspan，return {rowspan，colspan}，其他的单元格return{0,0} getData(params) {//临时数组，存放产品名称相同的数量this…...

编程日记 2023/8/16 0:49:11

Spring Boot @Validated 验证注解的使用

1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency> 2、使用 2.1、非对象参数参数如果是非对象格式，需要在controller类上面添…...

编程日记 2023/8/16 0:48:09

如何理解“对矩阵进行初等行变换不改变其列向量的线性关系”？

对矩阵A进行初等行变换相当于左乘一个可逆矩阵P。把A看作是列向量组，若有Ax0，则其中的x就说明了列向量的线性关系： [ α 1 , α 2 , α 3 ] [ x 1 x 2 x 3 ] [ 0 ] \left[ \alpha_1 ,\alpha_2, \alpha_3 \right] \begin{bmatrix} x_1\\ x…...

编程日记 2023/8/16 0:47:08

书店行业小程序开发攻略

随着移动互联网的快速发展，小程序成为了各行各业的热门选择，包括书店行业。书店小程序的开发可以为书店提供在线销售渠道，提高销售额，增强用户粘性。本文将介绍如何从搭建到上线开发一款书店行业小程序。首先，我们需要…...

编程日记 2023/8/16 0:46:06

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

Java面试专项一-准备篇

一、企业简历筛选规则一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历例如：Boss直聘（招聘方平台） 直接按照条件进行筛选例如&#xff1a…...

编程新知 2026/1/26 19:10:48

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径，但是vite中默认不可以。如何实现： vite中提供了resolve.alias：通过别名在指向一个具体的路径在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2026/2/6 13:49:41

Pandas 可视化集成：数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化？ 在数据科学和分析领域，可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具，如 Matplotlib、Seaborn、Plotly 等，但 Pandas 内置的可视化功能因其与数据结…...

编程新知 2026/2/6 1:04:48

SOC-ESP32S3部分：30-I2S音频-麦克风扬声器驱动

飞书文档https://x509p6c8to.feishu.cn/wiki/SKZzwIRH3i7lsckUOlzcuJsdnVf I2S简介 I2S（Inter-Integrated Circuit Sound）是一种用于传输数字音频数据的通信协议，广泛应用于音频设备中。 ESP32-S3 包含 2 个 I2S 外设，通过配置…...

编程新知 2026/1/31 18:42:55

安宝特方案丨从依赖经验到数据驱动：AR套件重构特种装备装配与质检全流程

在高压电气装备、军工装备、石油测井仪器装备、计算存储服务器和机柜、核磁医疗装备、大型发动机组等特种装备生产型企业，其产品具有“小批量、多品种、人工装配、价值高”的特点。生产管理中存在传统SOP文件内容缺失、SOP更新不及、装配严重依赖个人经验、产品装…...

编程新知 2026/1/28 21:07:50

第一章 React入门

一、React简介

1. 是什么？

2. 谁开发的？

3. 为什么要学？

4. React的特点

5. React高效的原因

二、React的基本使用

1. 效果

2. 相关js库

3. 创建虚拟DOM的两种方式

4. 虚拟DOM与真实DOM

4.1 React提供了一些API来创建一种 “特别” 的一般js对象

4.2 虚拟DOM对象最终都会被React转换为真实的DOM

4.3 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

三、React JSX

1. 效果

2. JSX

3. 渲染虚拟DOM(元素)

4. JSX练习

四、模块与组件、模块化与组件化的理解

1.模块

2. 组件

3. 模块化

4. 组件化

相关文章：