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

react实例与总结(一)

news 来源：原创 2025/5/18 7:13:47

一、简单认识

1.1、特点

1.2、JSX语法规则

1.3、函数组件和类式组件

1.4、类组件三大属性state、props、refs

1.4.1、state

1.4.2、props

1.4.3、refs

1.5、事件处理

1.6、收集表单数据—非受控组件和受控组件

1.7、高阶函数—函数柯里化

1.8、生命周期—新旧对比

1.8.1、旧16+

1.8.2、新17+

1.8.3、对比

1.9、DOM的Diffing算法

二、脚手架搭建

2.1、创建项目

因为真实DOM频繁操作节点会导致页面重绘和重排，影响性能，所以会用虚拟DOM【应用于前端框架】进行跨平台开发。

一、简单认识

英文：Getting Started – React

中文：快速入门 – React 中文文档

1.1、特点

(1)采用组件化模式、声明式编码，提高开发效率及组件复用率

(2)在React Native中使用它进行移动端开发

(3)使用虚拟DOM+Diffing算法，减少与真实DOM的交互

1.2、JSX语法规则

(1)、定义虚拟DOM时，不要写引号

(2)、标签中混入js表达式时要用{}

(3)、样式的类名指定不要用class,要用className

(4)、内联样式：要用style={{key:value}}形式

(5)、只有一个根标签，所有标签必须闭合

(6)、标签首字母

若小写字母开头，则将该标签转为html中同名元素；若html中没有该标签对应的同名元素，则报错

若大写字母开头，则react去找对应的组件，若找不到，则报错

在Microsoft Edge安装React Developer Tools扩展进行开发辅助，以下语法基于16+版本。

1.3、函数组件和类式组件

前者适用于简单组件(只能使用props属性，除非使用Hooks里的useRef 和 useState )，后者适用于复杂组件

    <div id="root"></div><script type="text/babel">// 1.创建函数式组件function MyComponent() {return <h1>我是函数式组件</h1>;}// 2.渲染组件到页面ReactDOM.render(<MyComponent />, document.getElementById("root"));</script>

      // 1.创建类式组件class MyComponent extends React.Component {render() {//  render()中的this 指向当前组件实例return <h1>我是类式组件</h1>;}}// 2.渲染组件到页面ReactDOM.render(<MyComponent />, document.getElementById("root"));

1.4、类组件三大属性state、props、refs

注意：类组件里的render()会调用1+N次（只要state更新就变）

1.4.1、state

      class MyMood extends React.Component {state = {isGood: false,number: 0,};render() {const { isGood, number } = this.state;return (<div><h1 onClick={this.changeMyMood}>今天心情很{isGood ? "好" : "糟糕"}</h1><h1 onClick={() => this.setState({ number: 10 })}>打个{number}分</h1></div>);}changeMyMood = () => {this.setState({isGood: !this.state.isGood,});};}ReactDOM.render(<MyMood />, document.getElementById("root"));

总结：

(1)、状态必须通过setState进行更新，且更新是一种合并，不是替换；

(2)、组件中render()方法中的this为组件实例对象，当this为undefined，如何解决？

a.通过函数对象的bind()强制绑定this；b.箭头函数

1.4.2、props

<div id="root1"></div>
<div id="root2"></div>
<div id="root3"></div><script type="text/babel">class Person extends React.Component {// 使用 PropTypes 进行类型检查static propTypes = {name: PropTypes.string.isRequired,//必传项sex: PropTypes.string,age: PropTypes.number,onSuccess: PropTypes.func};// 设置默认属性static defaultProps = {age: 18,sex: "男"};render() {const { name, age, sex } = this.props;return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 1}</li></ul>);}}
ReactDOM.render(<Person name="tom" age={18} sex="男" onSuccess={onSuccess}/>, document.getElementById("root1"));// 批量传递 props 【{...x}】const backData = { name: '后端返回数据', age: 19, sex: "女" }; 
ReactDOM.render(<Person {...backData} />, document.getElementById("root2"));
ReactDOM.render(<Person name="jack" age={20}/>, document.getElementById("root3"));function onSuccess() {console.log('执行事件');}</script>

函数组件Props

      function Person(props) {const { name, age, sex } = props;return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 1}</li></ul>);}Person.propTypes = {name: PropTypes.string.isRequired, sex: PropTypes.string,age: PropTypes.number,};
ReactDOM.render(<Person name='tom' age={18} sex="男" />, document.getElementById("root"));

总结：

(1)、组件标签的所有属性都保存在props中，但是组件内部不要修改props数据；

(2)、批量传递：{...item}、类型检查：PropTypes、默认属性：defaultProps

1.4.3、refs

class MyComponent extends React.Component {showData = () => {const { input1 } = this.refs;alert(input1.value);};showData2 = () => {const { input2 } = this;alert(input2.value);};myRef=React.createRef();showData3 = () => {alert(this.myRef.current.value);};
render() {return (<div>{/* 1、字符串形式 */}<input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点击提示左侧数据</button>&nbsp;{/* 2、回调函数形式 */}<inputref={(c) => (this.input2 = c)}onBlur={this.showData2}type="text"placeholder="失去焦点提示数据"/>&nbsp;{/* 3、createRef API：存储被ref标识的节点，“专人专用” */}<inputref={this.myRef}onBlur={this.showData3}type="text"placeholder="createRef的使用"/></div>);}
}
ReactDOM.render(<MyComponent />, document.getElementById("root"));

总结：

(1)、直接访问和操作DOM元素或React组件实例；

(2)、使用React.createRef()或者回调函数形式（类组件）；使用useRef（函数组件）

1.5、事件处理

总结：

(1)、通过onXxx属性指定事件处理函数，事件通过事件委托【委托给组件最外层的元素】处理的；

(2)、通过event.target得到发生事件的DOM元素对象【高效】；

(3)、原生Js事件使用onclick，而React事件使用onClick【为了更好的兼容性】。

1.6、收集表单数据—非受控组件和受控组件

特性	受控组件 (Controlled)	非受控组件 (Uncontrolled)
值存储位置	存储在React组件的`state`中	存储在DOM中（使用`ref`访问）
表单元素控制	React通过`state`控制表单的值	浏览器控制，React不干涉
更新方式	用户输入时通过`onChange`更新`state`	使用`ref`获取值，无需触发事件
适用场景	需要表单验证、交互或复杂逻辑时	简单表单，且无需与React状态紧密交互
代码复杂度	稍微复杂，需要维护状态和事件处理	简单，直接使用`ref`访问DOM

1.7、高阶函数—函数柯里化

总结：

高阶函数：如果函数的参数或者返回值是函数，那么这个函数就是高阶函数。

常见有：Promise、setTimeout、arr.map()、call、apply、bind、...

函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的一种函数编码形式。·

或者：直接在视图上使用箭头函数，同时传入属性值和对应的event。

1.8、生命周期—新旧对比

1.8.1、旧16+

  <script type="text/babel">class MyComponent extends React.Component {constructor(props) {console.log("构造器---constructor");super(props);this.state = { count: 0 };}componentWillMount() {console.log("组件将要挂载---componentWillMount");}componentDidMount() {console.log("组件挂载完毕---componentDidMount");}shouldComponentUpdate(nextProps, nextState) {console.log("组件是否需要更新---shouldComponentUpdate");return true;}componentWillUpdate() {console.log("组件将要更新---componentWillUpdate");}componentDidUpdate() {console.log("组件更新完毕---componentDidUpdate");}componentWillUnmount() {console.log("组件即将卸载---componentWillUnmount");}moveIt = () => {ReactDOM.unmountComponentAtNode(document.getElementById("root")); //卸载};addIt = () => {const { count } = this.state;this.setState({ count: count + 1 });};forceIt = () => {this.forceUpdate();};render() {console.log("挂载页面---render");const { count } = this.state;return (<div><h2>当前求和为：{count}</h2><button onClick={this.addIt}>点击+1</button><button onClick={this.moveIt}>销毁</button><button onClick={this.forceIt}>强制更新</button></div>);}}// A和B是父子关系class A extends React.Component {state = { carName: '奔驰' };changeCar = () => {this.setState({ carName: '宝马' });};render() {return (<div><div>A页面</div><button onClick={this.changeCar}>换车</button><B carName={this.state.carName} /></div>);}}class B extends React.Component {componentWillReceiveProps(nextProps) {console.log('B组件接收到新的属性(第一次不调)', nextProps);}render() {return <div>B组件接收的车是:{this.props.carName}</div>;}}// ReactDOM.render(<MyComponent />, document.getElementById("root"));ReactDOM.render(<A />, document.getElementById("root"));</script>

1.8.2、新17+

    static getDerivedStateFromProps(props,state) {console.log("获取新的属性---getDerivedStateFromProps",props,state);return null;//返回null或者props}ReactDOM.render(<MyComponent count={199} />, document.getElementById("root"));

<style>.list {width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news {height: 30px;
</style>
class MyComponent extends React.Component {state = { newArr: [] }componentDidMount() {setInterval(() => {const { newArr } = this.stateconst news = '新闻' + (newArr.length + 1)this.setState({ newArr: [news, ...newArr] })}, 1000);}getSnapshotBeforeUpdate(prevProps, prevState) {return this.refs.list.scrollHeight;// 获取更新前的DOM节点}componentDidUpdate(prevProps, prevState, snapshot) {this.refs.list.scrollTop += this.refs.list.scrollHeight - snapshot;}render() {return <div className="list" ref="list">{this.state.newArr.map((item, index) => {return <div className="news" key={index}>{item}</div>})}</div>;}
}

1.8.3、对比

17+在16+的基础上新增了getDerivedStateFromProps、getSnapshotBeforeUpdate；

即将废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate三个钩子。

1.9、DOM的Diffing算法

经典面试题：为啥key不能使用index，而是取id（唯一标识）？

总结：
1、使用 index 作为 key：
在列表项的顺序发生变化、增加或删除时，可能会导致错误渲染或状态丢失。
适用于列表项不变，且不涉及删除、增加或排序操作的简单情况。
2、使用 id 作为 key：
更稳定，能够确保元素在更新时保持一致，特别是在列表顺序发生变化时。
尤其是在动态数据列表（增、删、改、排序等操作）中使用。

二、脚手架搭建

2.1、创建项目

1、全局安装：npm i -g create-react-app【查看是否下载create-react-app --version】

2、切换到想创建项目的目录下：create-react-app react_app【Node版本在14+及以上】

3、进入项目文件夹：cd react_app

4、启动项目：npm start【修改package.json，重新下载node_modules、 package-lock.json来修改版本】

或者直接用：React--Umi和Dva_react dva-CSDN博客

react实例与总结(一)

目录一、简单认识 1.1、特点 1.2、JSX语法规则 1.3、函数组件和类式组件 1.4、类组件三大属性state、props、refs 1.4.1、state 1.4.2、props 1.4.3、refs 1.5、事件处理 1.6、收集表单数据—非受控组件和受控组件 1.7、高阶函数—函数柯里化 1.8、生命周期—新旧…...

编程日记 2025/5/18 7:13:47

科技赋能直播！DeepSeek大模型+智享AI直播第三代plus版本，未来直播将更加智能化！

科技赋能直播！DeepSeek大模型智享AI直播第三代plus版本，未来直播将更加智能化！ 能成事的人，都是懂得整合资源的高手。要学会“万物不为我所有，万物皆为我所用。”的思维方式。一个人的成就高低，在于他的…...

编程日记 2025/5/18 7:07:15

几种3D 旋转的参数化形式

在 3D 空间中，旋转是 3 自由度的，刚体变换是 6 自由度的（3自由度旋转3自由度平移）。 3x3 的旋转矩阵有 9 个量，表达了 3自由度的旋转。旋转矩阵是有自约束的，即一个旋转矩阵是一个正交矩阵，…...

编程日记 2025/5/18 6:25:44

【kubernetes组件合集】深入解析Kubernetes组件之三：client-go

深入解析Kubernetes组件之三：client-go 目录深入解析Kubernetes组件之三：client-go 引言 1. client-go简介 2. client-go的功能 2.1 资源操作 2.2 资源监听 2.3 认证和授权 2.4 错误处理和重试 2.5 扩展性和定制化 3. 使用client-go与Kubern…...

编程日记 2025/5/17 13:32:00

强化学习概念入门

1 概述强化学习，英文名为reinforcement learning，简称RL，是机器学习的一个分支，其想要解决的问题是智能体（agent）如何在复杂环境（environment）下最大化其能获得的奖励。一般来说…...

编程日记 2025/5/17 15:19:37

自动控制视频讲解

本视频几乎包含了所有《自动控制原理》（胡寿松）所有重点章节。针对于考研都能满足。视频内容包括但不限于：时域分析、信号流图、结构图绘制、跟轨迹、幅相曲线、稳定裕度、z变换、离散传递函数、数字控制器、稳定判据、相平面法、描述函数法…...

编程日记 2025/5/9 13:26:08

【Mastering Vim 2_01】开篇词：在 AI 时代持续深耕底层技术，做长期主义的坚定捍卫者

【最新版《Mastering Vim》封面，涵盖 Vim 9.0 版特性】文章目录 1 背景：AI 时代的底层技术觉醒2 Vim：一款被严重低估的文本编辑神器3 聊聊 IT 人士的职业病4 进阶之道：构建完整的知识体系5 从 AI 时代的深耕与精进再谈长期主义 1…...

编程日记 2025/5/17 11:25:49

zsh: command not found: conda

场景描述在 Linux 服务器上使用 zsh 时，如果出现 zsh: command not found: conda 错误，说明你的系统未正确配置 conda 命令，或者你尚未安装 Anaconda/Miniconda。解决方案确保已安装 Anaconda 或 Miniconda conda 是 Anaconda 或 Minico…...

编程日记 2025/5/18 6:03:24

Unity中使用Best MQTT v3插件实现MQTT通信功能，进行模块拆分

概述本文将详细介绍如何在Unity中使用Best MQTT v3插件实现MQTT通信功能。将通过模块化设计实现配置加载、连接管理、订阅/发布等功能，并提供完整的代码实现。重连说明：当意外断开连接的时候，会进行重新连接，重连上之后会再次订…...

编程日记 2025/5/18 6:13:49

NO.14十六届蓝桥杯备战|switch语句|break|default|2道练习(C++)

switch语句除了 if 语句外，C语⾔还提供了 switch 语句来实现分⽀结构。 switch 语句是⼀种特殊形式的 if…else 结构，⽤于判断条件有多个结果的情况。它把多重的 else if 改成更易⽤、可读性更好的形式。 switch (expression) { case value1: stat…...

编程日记 2025/5/17 23:26:24

探索B-树系列

🌈前言🌈 本文将讲解B树系列，包含 B-树，B树，B*树，其中主要讲解B树底层原理，为什么用B树作为外查询的数据结构，以及B-树插入操作并用代码实现；介绍B树、B*树。 &#x1f4…...

编程日记 2025/5/17 9:20:53

【SpringBoot实现全局API限频】最佳实践

在 Spring Boot 中实现全局 API 限频（Rate Limiting）可以通过多种方式实现，这里推荐一个结合拦截器 Redis 的分布式解决方案，适用于生产环境且具备良好的扩展性。方案设计思路核心目标：基于客户端标识&#xff08…...

编程日记 2025/5/18 6:58:58

esxi添加内存条因为资源不足虚拟机无法开机——避坑

exsi8.0我加了6根内存条，然后将里面的ubuntu的内存增加 haTask-2-vim.VirtualMachine.powerOn-919 描述打开该虚拟机电源虚拟机 ub22 状况失败 - 模块“MonitorLoop”打开电源失败。错误模块“MonitorLoop”打开电源失败。无法将交换文件 /vmfs/volumes…...

编程日记 2025/5/12 23:27:31

实验8 配置标准访问控制列表IPv4 ACL

实验8 配置标准访问控制列表IPv4 ACL 一．实验目的 1、掌握IPv4 ACL工作方式和工作过程。 2、掌握定义编号和命名的标准 IPv4 ACL 的方法。 3、掌握接口和VTY下应用标准IPv4 ACL的方法。二．实验内容配置IPv4 ACL的实验拓扑如下图所示。图1 实验拓扑…...

编程日记 2025/5/15 17:25:06

5.7.2 进度管理

文章目录进度管理Gantt图PERT图进度管理进度安排：通过将项目分解成多个活动，分析活动间的依赖关系，估算工作量，分配资源，制定活动时序。 Gantt图 Gantt图横坐标表示时间，纵坐标表示不同任务。使用一条条…...

编程日记 2025/5/18 6:35:53

Android新版高斯模糊(毛玻璃)官方实现，Kotlin

Android新版高斯模糊(毛玻璃)官方实现，Kotlin 从Android 12开始，Android官方API支持高斯模糊(毛玻璃)效果。关键是通过RenderEffect实现。 https://developer.android.com/reference/android/graphics/RenderEffecthttps://developer.android.com/refer…...

编程日记 2025/5/18 5:59:08

b站——《【强化学习】一小时完全入门》学习笔记及代码（1-3 多臂老虎机）

问题陈述我们有两个多臂老虎机（Multi-Armed Bandit），分别称为左边的老虎机和右边的老虎机。每个老虎机的奖励服从不同的正态分布： 左边的老虎机：奖励服从均值为 500，标准差为 50 的正态分布，即…...

编程日记 2025/5/18 6:00:30

使用开源项目xxl-cache构建多级缓存

xxl-cache简介官网地址：https://www.xuxueli.com/xxl-cache/ 概述 XXL-CACHE 是一个多级缓存框架，高效组合本地缓存和分布式缓存(RedisCaffeine)，支持“多级缓存、一致性保障、TTL、Category隔离、防穿透”等能力；拥有“高性…...

编程日记 2025/5/18 6:24:14

分层解耦-三层架构

controller: 控制层，接收前端发送的请求，对请求进行处理，并响应数据。 service: 业务逻辑层，处理具体的业务逻辑。 dao: 数据访问层(Data Access Object)(持久层)，负责数据访问操作，包括数据的增、删、改…...

编程日记 2025/5/18 6:37:25

简化的动态稀疏视觉Transformer的PyTorch代码

存一串代码（简化的动态稀疏视觉Transformer的PyTorch代码） import torch import torch.nn as nn import torch.nn.functional as F class DynamicSparseAttention(nn.Module): def __init__(self, dim, num_heads8, dropout0.1): super().__init__()…...

编程日记 2025/5/18 5:35:31

掌握 PHP 单例模式：构建更高效的应用

在 PHP 应用开发中，资源的高效管理至关重要。单例模式是一种能够帮助我们实现这一目标的设计模式。本文将深入探讨单例模式的概念、工作原理以及在 PHP 项目中何时应该（或不应该）使用它。什么是单例模式？ 单例模式是一种设计模…...

编程日记 2025/5/16 1:42:53

今日AI和商界事件(2025-02-11)

今日AI大事件主要包括以下几个方面： 一、行业竞购与合作变动马斯克组团竞购OpenAI 据《华尔街日报》报道，马斯克率投资者财团出价974亿美元竞购OpenAI，欲使其回归开源公益使命。xAI支持此次竞购，若成功，xAI或与OpenA…...

编程日记 2025/5/12 23:30:04

ArcGIS Pro批量创建离线服务sd包

背景： 主要针对一个工程内有多个地图框项： 处理方法：通过Python脚本处理打包。运行环境在Pro的Python环境中去运行编写的Python脚本。 Python 脚本参考 import arcpy import os# Set output file names outdir r"d:\data\out&…...

编程日记 2025/5/18 6:31:28

R语言文本分析天龙八部

起因，目的: 前面有人对 “倚天屠龙记” 进行分析，我这里只是进行模仿而已。完整的文件，已经绑定了，反正读者可以找一下。案例背景小说《天龙八部》是金庸先生所著的武侠小说，也是“射雕三部曲”的前传。全书共50章，字数超过一百万字。故事发生在北宋末年，以大理…...

编程日记 2025/5/17 10:39:26

【AI论文】Visual Instruction Tuning

文献核心目标作者的目标是通过多模态指令微调(Visual Instruction Tuning)来训练一个通用的视觉助手，使其能够理解用户的语言指令并与视觉内容结合完成任务。例如，用户可以上传图片并提出问题，模型根据图片内容作出回答。 1. 引言什么是多模态交互？为什么重要？人类…...

编程日记 2025/5/18 6:10:53

产品详情页中品牌官网详情对应后端的字段是 detail

文章目录 1、在这个Vue代码中，品牌官网详情对应后端的字段是 detail2、品牌官网详情功能相关的代码片段3、export const productSave (data: any) >4、ProductController5、ProductDto 类6、ProductApiService 1、在这个Vue代码中，品牌官网详情对…...

编程日记 2025/5/14 4:35:58

vue知识点2

1.methods和mounted的区别 methods是定义方法，不涉及到调用 mounted涉及到操作所以methods后面是：，mounted后面是（） 2.介绍一下emit的用法如果子控件要调用父页面的方法，在父页面的子控件引用处&…...

编程日记 2025/5/13 23:44:01

使用 mkcert 本地部署启动了 TLS/SSL 加密通讯的 MongoDB 副本集和分片集群

MongoDB 是支持客户端与 MongoDB 服务器之间启用 TLS/SSL 进行加密通讯的, 对于 MongoDB 副本集和分片集群内部的通讯, 也可以开启 TLS/SSL 认证. 本文会使用 mkcert 创建 TLS/SSL 证书, 基于创建的证书, 介绍 MongoDB 副本集、分片集群中启动 TLS/SSL 通讯的方法. 我们将会在…...

编程日记 2025/5/14 11:57:23

荣耀手机Magic3系列、Magic4系列、Magic5系列、Magic6系列、Magic7系列详情对比以及最新二手价格预测

目录荣耀Magic系列手机详细对比最新二手价格预测性价比分析总结以下是荣耀Magic系列手机的详细对比以及最新二手价格预测： 荣耀Magic系列手机详细对比特性荣耀Magic3系列荣耀Magic4系列荣耀Magic5系列荣耀Magic6系列荣耀Magic7系列处理器骁龙888&#x…...

编程日记 2025/5/14 2:01:28

利用HTML和css技术编写学校官网页面

目录一，图例展示二，代码说明 1，html部分： 【第一张图片】【第二张图片】【第三张图片】 2，css部分： 【第一张图片】【第二张图片】【第三张图片】三，程序代码一，…...

编程日记 2025/5/15 8:50:47

易语言Easy Programming Language

E易语言 EF 易语言.飞场 EPL EF 我心易飞扬! Elogo 易乐谷我的程序我来写！ Easy Programming Language Elogo 未来的小程序员！易语言运行时环境检验报告自有编辑器、自带数据库、本土化支持易语言系统全部自行设计开发。自有编译器。所编译目的程序运…...

编程日记 2025/5/16 3:35:18

支付宝安全发全套解决方案

产品价值 ● 通过支付宝的资金能力，让服务商机构通过信息流驱动资金流，在不碰触客户企业资金的同时，为客户企业完成转账。账目清晰，无合规和资质风险。 ● 为服务商提供全链路的资金流动明细信息，服务商可以将这些信息…...

编程日记 2025/5/17 20:16:13

如何通过腾讯 ima.copilot 训练自己的知识库

如何通过腾讯 ima.copilot 训练自己的知识库在信息爆炸的时代，拥有一个专属的知识库，能让我们在学习、工作中快速获取所需信息，极大地提升效率。腾讯推出的 AI 智能工作台 ima.copilot，为我们打造个人知识库提供了便利。今天&am…...

编程日记 2025/5/16 20:48:41

本地部署DeepSeek-R1（Mac版）

本地部署DeepSeek-R1（Mac版） 前言：过年这段时间，DeepSeek火遍全球，但遭受黑客攻击，10次对话基本9次都是服务器繁忙，请稍后重试。那么，本地部署整起来总体来说，本地部署…...

编程日记 2025/5/16 12:11:23

uniapp 编译生成鸿蒙正式app步骤

1，在最新版本DevEco-Studio工具新建一个空项目并生成p12和csr文件（构建-生成私钥和证书请求文件） 2，华为开发者平台根据上面生成的csr文件新增cer和p7b文件，分发布和测试 3，在最新版本DevEco-Studio工具文…...

编程日记 2025/5/12 7:29:31

C++STL与内存管理总结

1：内存管理方面：涉及分配（请求）与释放，主要分为静态内存，自动存储期（栈内存）、动态内存分配（堆内存）以及智能指针系列，之所以重要，因…...

编程日记 2025/5/17 15:29:34

【文本处理】如何在批量WORD和txt文本提取手机号码，固话号码，提取邮箱，删除中文，删除英文，提取车牌号等等一些文本提取固定格式的操作，基于WPF的解决方案

企业的应用场景数据清洗：在进行数据导入或分析之前，往往需要对大量文本数据进行预处理，比如去除文本中的无关字符（中文、英文），只保留需要的联系信息（手机号码、固话号码、邮箱）。…...

编程日记 2025/5/18 0:10:40

算法跟练第十弹——栈与队列

文章目录 part01 逆波兰表达式求值part02 滑动窗口最大值part03 前 K 个高频元素归纳：将字符串转转换成整数：LinkedListMap遍历优先级队列的比较器跟着代码随想录刷题的第十天。代码随想录链接：代码随想录 part01 逆波兰表达式求值题目链接…...

编程日记 2025/5/14 17:30:57

计算机毕业设计——Springboot的校园新闻网站

🎉**欢迎来到琛哥的技术世界！**🎉 📘 博主小档案： 琛哥，一名来自世界500强的资深程序猿，毕业于国内知名985高校。 🔧 技术专长： 琛哥在深度学习任务中展现出卓越的能力&a…...

编程日记 2025/5/17 10:51:52

在CT107D单片机综合训练平台上实现外部中断控制LED闪烁

引言在单片机开发中，外部中断是一个非常重要的功能，它可以让单片机在检测到外部信号变化时立即做出响应。本文将详细介绍如何在CT107D单片机综合训练平台上使用外部中断来控制LED灯的闪烁。我们将使用两种不同的方式来实现这一功能：一种是在…...

编程日记 2025/5/17 11:22:02

C# ASP.NET 介绍

.NET学习资料 .NET学习资料 .NET学习资料一、概述 ASP.NET是由微软创建的一个开源 Web 框架，用于使用.NET 构建现代化的 Web 应用程序和服务。它为开发者提供了一套丰富的工具、库和编程模型，使得创建功能强大、高效且安全的 Web 应用变得更加容易。…...

编程日记 2025/5/18 6:38:25

Django中select_related 的作用

Django中这句代码Dynamic.objects.select_related(song)是什么意思？ 在 Django 中，这句代码： Dynamic.objects.select_related(song) 的作用是在查询 Dynamic 模型的同时，预加载 song 关联的外键对象，从而减少数据…...

编程日记 2025/5/16 10:38:24

MyBatis常见知识点

#{} 和 ${} 的区别是什么？ 答： ${}是 Properties 文件中的变量占位符，它可以用于标签属性值和 sql 内部，属于原样文本替换，可以替换任意内容，比如${driver}会被原样替换为com.mysql.jdbc. Driver。一个…...

编程日记 2025/5/16 1:46:05

CentOS 安装 Docker

一、使用官方安装脚本自动安装安装命令如下： curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 也可以使用国内 daocloud 一键安装命令： curl -sSL https://get.daocloud.io/docker | sh 二、手动安装卸载旧版本较旧的 Do…...

编程日记 2025/5/9 17:07:34

【sqlite】python操作sqlite3（含测试）

个人小项目或者小团队，sqllite很适用，数据库封装操作如下 #!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2025-02-08 13:57 # Author : duxiaowei # File : connect_sqllite.py # Software: PyCharm """ sqllite操作, …...

编程日记 2025/5/16 17:24:21

PTC Windchill介绍

以下内容摘自PTC的Windchill介绍材料，确有其用，摘录一些： 存储和搜索产品信息所有产品信息的中央存储库。同样的，对于产品相关内容，例如 CAD 模型、文档、技术插图、嵌入式软件、计算和要求规范，都有一个…...

编程日记 2025/5/17 5:25:37

3.矩阵分解技术在推荐系统中的应用

接下来我们将深入探讨矩阵分解技术在推荐系统中的应用。矩阵分解是一种强大的技术，可以有效地处理数据稀疏性问题，并提高推荐系统的性能。在这一课中，我们将介绍以下内容： 矩阵分解的基本概念奇异值分解（SVD&#xff…...

编程日记 2025/5/14 17:33:29

visual studio 在kylin v10上跨平台编译时c++标准库提示缺少无法打开的问题解决

情况1：提示无法打开源文件 "string"之类导致无法编译情况2:能编译，但无法打开这些库文件或标准库使用提示下划红色问题解决方案： 一、通过工具->选项->跨平台里，在“远程标头IntelliSense管理器”更新下载一下…...

编程日记 2025/5/15 21:15:43

TextWebSocketHandler 和 @ServerEndpoint 各自实现 WebSocket 服务器

TextWebSocketHandler 和 ServerEndpoint 都可以用于实现 WebSocket 服务器，但它们属于不同的技术栈，使用方式和功能有一些区别。以下是它们的对比： 1. 技术栈对比特性TextWebSocketHandler (Spring)ServerEndpoint (Java EE/JSR-356)所属框…...

编程日记 2025/5/12 8:48:48

一种非完全图下的TSP求解算法

序旅行商问题（Traveling Salesman Problem，简称TSP）是组合优化中的一个经典问题，就是给定一组城市和城市之间的距离，找到一条最短路径使得每个城市只被访问一次后返回到起点。一些传统的解法都是基于完全图的，我在网上也很少找到非完全图的解法，非完全图应该在实际应…...

编程日记 2025/5/17 20:49:44

一、简单认识

1.1、特点

1.2、JSX语法规则

1.3、函数组件和类式组件

1.4、类组件三大属性state、props、refs

1.4.1、state

1.4.2、props

1.4.3、refs

1.5、事件处理

1.6、收集表单数据—非受控组件和受控组件

1.7、高阶函数—函数柯里化

1.8、生命周期—新旧对比

1.8.1、旧16+

1.8.2、新17+

1.8.3、对比

1.9、DOM的Diffing算法

二、脚手架搭建

2.1、创建项目

相关文章：