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

React 全栈体系（一）

news 2025/11/10 21:29:15

第一章 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

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/10/31 0:43:35

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色点击visual studio 上方的工具-> 选项在选项窗口中，选择环境 -> 常规 ，将其中的颜色主题改成深色点击确定，更改完成...

编程新知 2025/11/7 21:03:59

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/11/8 8:00:59