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

React开发指南：核心、实践与案例

news 来源：原创 2025/8/16 9:42:52

文章目录

- 一、React核心架构与设计哲学
- - 1.1 虚拟DOM与Diff算法
  - 1.2 JSX编译原理
  - 1.3 组件化设计模式
  - 1.4 Fiber架构解析
  - 1.5 组件生命周期（类组件）
- 二、React核心特性详解
- - 2.1 数据流管理
  - 2.2 Hooks革命
  - 2.3 Context API进阶
  - 2.4 自定义Hooks设计模式
- 三、React 18新特性解析
- - 3.1 并发模式（Concurrent Mode）
  - 3.2 自动批处理优化
  - 3.3 Suspense数据获取
  - 3.4 Server Components
- 四、工程化实践方案
- - 4.1 状态管理进阶
  - 4.2 性能优化策略
  - 4.3 测试与部署
  - 4.4 TypeScript集成
  - 4.5 路由管理（React Router v6）
- 五、全栈开发实战
- - 5.1 电商项目架构设计
  - 5.2 典型功能实现
  - 5.3 身份认证集成
- 六、扩展生态与前沿趋势
- - 6.1 主流扩展库推荐
  - 6.2 React Native跨平台开发
  - 6.3 微前端架构
- 七、最佳实践与常见问题
- - 7.1 样式管理方案
  - 7.2 高频问题解答
  - 7.3 性能优化深度
  - 7.4 高频问题扩展
- 八、React工具链与调试
- - 8.1 开发工具配置
  - 8.2 调试技巧

一、React核心架构与设计哲学

1.1 虚拟DOM与Diff算法

React通过虚拟DOM实现高性能渲染。虚拟DOM是内存中的轻量级JS对象树，数据变更时React会生成新虚拟DOM树，通过Diff算法对比新旧树的差异，仅更新真实DOM的变化部分。这种机制相比直接操作DOM性能提升显著，尤其在复杂视图场景下。
Diff算法优化策略：

跨层级节点对比时直接销毁重建
相同类型组件保持结构复用
Key属性优化列表渲染效率

1.2 JSX编译原理

JSX是React的标记语法扩展，Babel会将其转换为React.createElement调用：

// 编译前
const element = <div className="title">Hello</div>;
// 编译后
React.createElement('div', {className: 'title'}, 'Hello')

JSX支持嵌入JavaScript表达式（使用{}包裹），并强制要求标签闭合。

1.3 组件化设计模式

React将UI拆分为独立可复用的组件，支持两种定义方式：

// 函数组件（推荐）
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

组件需遵循单一职责原则，通过Props进行数据传递，通过State管理内部状态。

1.4 Fiber架构解析

React 16引入的Fiber架构重构了核心调度机制：

增量渲染：将渲染任务拆分为多个可中断的小任务。
优先级调度：区分用户交互等高优先级更新与普通更新。
错误边界：通过componentDidCatch捕获子组件树错误。

class ErrorBoundary extends React.Component {state = { hasError: false }static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, info) {logErrorToService(error, info);}render() {return this.state.hasError ? <FallbackUI />: this.props.children;}
}

1.5 组件生命周期（类组件）

生命周期阶段	主要方法
挂载阶段	constructor → render → componentDidMount
更新阶段	shouldComponentUpdate → render → componentDidUpdate
卸载阶段	componentWillUnmount
错误处理	componentDidCatch

Hooks生命周期对应关系：

useEffect(() => {}, []) 对应 componentDidMount
useEffect(() => { return () => {} }) 对应 componentWillUnmount
useMemo/useCallback 对应 shouldComponentUpdate优化

二、React核心特性详解

2.1 数据流管理

Props：父组件向子组件传递的只读数据
State：组件内部状态，通过setState更新触发重新渲染
Context API：跨组件层级传递数据，替代部分Redux场景

// 使用Context实现主题切换
const ThemeContext = createContext('light');
function App() {const [theme, setTheme] = useState('light');return (<ThemeContext.Provider value={theme}><Toolbar /></ThemeContext.Provider>);
}

2.2 Hooks革命

React 16.8引入的Hooks机制改变了组件开发范式：

// 状态管理
const [count, setCount] = useState(0);
// 副作用处理
useEffect(() => {document.title = `点击次数：${count}`;
}, [count]);
// 性能优化
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Hooks解决了类组件生命周期函数逻辑分散的问题。

2.3 Context API进阶

优化Context性能的最佳实践：

// 拆分Context防止无关更新
const UserContext = createContext();
const ThemeContext = createContext();function App() {return (<UserContext.Provider value={user}><ThemeContext.Provider value={theme}><Content /></ThemeContext.Provider></UserContext.Provider>);
}// 使用useContext选择订阅
function Content() {const user = useContext(UserContext);const theme = useContext(ThemeContext);// ...
}

2.4 自定义Hooks设计模式

典型自定义Hooks示例：

// 封装数据请求Hook
function useFetch(url) {const [data, setData] = useState(null);const [error, setError] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {fetch(url).then(res => res.json()).then(setData).catch(setError).finally(() => setLoading(false));}, [url]);return { data, error, loading };
}// 使用示例
function UserProfile({ userId }) {const { data: user } = useFetch(`/api/users/${userId}`);// ...
}

三、React 18新特性解析

3.1 并发模式（Concurrent Mode）

通过时间切片和任务优先级调度实现更流畅的交互体验：

import { startTransition } from 'react';
// 标记非紧急状态更新
startTransition(() => {setSearchQuery(input);
});

3.2 自动批处理优化

React 18默认合并同一事件循环内的多次状态更新，减少不必要的渲染。

3.3 Suspense数据获取

// 异步组件加载
const ProfilePage = React.lazy(() => import('./ProfilePage'));function App() {return (<Suspense fallback={<Spinner />}><ProfilePage /></Suspense>);
}// 数据预取模式
const resource = fetchProfileData();function ProfileDetails() {const user = resource.user.read();return <h1>{user.name}</h1>;
}

3.4 Server Components

服务端组件特性：

在服务端执行，减少客户端JS体积
直接访问后端服务
自动代码分割

// Note.server.js - 服务端组件
import db from 'database';export default function Note({ id }) {const note = db.notes.get(id);return <div>{note.content}</div>;
}

四、工程化实践方案

4.1 状态管理进阶

方案	适用场景	典型库
Context API	中小型应用	内置
Redux Toolkit	复杂状态逻辑	@reduxjs/toolkit
Recoil	原子化状态管理	recoil

// Redux Toolkit示例
const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: state => state + 1}
});

4.2 性能优化策略

组件缓存：使用React.memo缓存函数组件
代码分割：动态导入+Suspense实现按需加载
渲染优化：避免在渲染函数中进行复杂计算

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {return (<Suspense fallback={<Spinner />}><HeavyComponent /></Suspense>);
}

4.3 测试与部署

单元测试：使用Jest+Testing Library
E2E测试：Cypress/Puppeteer
CI/CD流程：

# GitHub Actions示例
jobs:deploy:steps:- run: npm ci- run: npm run build- uses: vercel-action@v20with:vercel-token: ${{ secrets.VERCEL_TOKEN }}

4.4 TypeScript集成

类型安全开发模式：

interface User {id: number;name: string;email: string;
}const UserCard: React.FC<{ user: User }> = ({ user }) => (<div><h2>{user.name}</h2><p>{user.email}</p></div>
);

4.5 路由管理（React Router v6）

动态路由与嵌套路由实践：

// 路由配置
<Routes><Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="products" element={<Products />}><Route path=":id" element={<ProductDetail />} /></Route><Route path="*" element={<NotFound />} /></Route>
</Routes>// 编程式导航
const navigate = useNavigate();
navigate('/products/123', { replace: true });

五、全栈开发实战

5.1 电商项目架构设计

├── src
│   ├── api          # API层
│   ├── components   # 通用组件
│   ├── features     # 业务模块
│   ├── hooks        # 自定义Hooks
│   ├── store        # 状态管理
│   └── utils        # 工具函数

5.2 典型功能实现

商品列表页（含骨架屏）：

import { useQuery } from 'react-query';
function ProductList() {const { data, isLoading } = useQuery('products', fetchProducts);return (<div className="grid">{isLoading ? (<Skeleton count={5} />) : (data.map(product => <ProductCard key={product.id} {...product} />))}</div>);
}

5.3 身份认证集成

JWT认证流程实现：

// 登录处理
const handleLogin = async (credentials) => {const response = await fetch('/api/login', {method: 'POST',body: JSON.stringify(credentials)});const { token } = await response.json();localStorage.setItem('authToken', token);navigate('/dashboard');
}// 请求拦截
axios.interceptors.request.use(config => {const token = localStorage.getItem('authToken');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});

六、扩展生态与前沿趋势

6.1 主流扩展库推荐

类别	推荐方案	特点
路由管理	React Router v6	嵌套路由/动态加载
表单处理	React Hook Form	高性能/最小化重渲染
数据可视化	Recharts	基于D3的声明式图表
服务端渲染	Next.js	SEO优化/静态生成

6.2 React Native跨平台开发

React生态通过React Native实现"Learn Once, Write Anywhere"愿景，使用相同React语法开发iOS/Android原生应用，支持90%以上原生组件调用。

6.3 微前端架构

使用Module Federation实现微前端：

// host应用配置
module.exports = {plugins: [new ModuleFederationPlugin({name: 'host',remotes: {remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'}})]
}// 动态加载远程组件
const RemoteComponent = React.lazy(() => import('remoteApp/Button'));

七、最佳实践与常见问题

7.1 样式管理方案

CSS Modules：局部作用域CSS
Styled Components：CSS-in-JS方案
Tailwind CSS：原子化CSS框架

7.2 高频问题解答

Q1：如何处理复杂表单验证？

// 使用React Hook Form + Yup
const schema = yup.object({email: yup.string().email('无效的邮箱格式').required('邮箱必填'),password: yup.string().min(6, '密码至少6位').required('密码必填')
});function LoginForm() {const { register, handleSubmit, formState: { errors } } = useForm({resolver: yupResolver(schema)});return (<form onSubmit={handleSubmit(onSubmit)}><input {...register('email')} /><p>{errors.email?.message}</p><input {...register('password')} type="password" /><p>{errors.password?.message}</p><button type="submit">登录</button></form>);
}

Q2：如何避免Hooks闭包陷阱？

// 问题示例
function Counter() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {// 始终读取初始化时的count值setCount(count + 1);}, 1000);return () => clearInterval(timer);}, []); // 缺少count依赖return <div>{count}</div>;
}// 解决方案：使用函数式更新
setCount(prev => prev + 1);

7.3 性能优化深度

使用React DevTools分析工具：

安装浏览器扩展
使用Profiler记录组件渲染时间
检测不必要的重新渲染
优化关键渲染路径

7.4 高频问题扩展

Q3：如何实现组件懒加载？

// 使用React.lazy和Suspense
const LazyComponent = React.lazy(() => import('./Component'));
function App() {return (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>);
}

八、React工具链与调试

8.1 开发工具配置

Vite：极速开发体验

npm create vite@latest my-react-app -- --template react-ts

ESLint配置：

{"extends": ["react-app","plugin:react-hooks/recommended"],"rules": {"react-hooks/exhaustive-deps": "warn"}
}

8.2 调试技巧

错误边界捕获组件异常
严格模式检测潜在问题
React DevTools组件树审查
Chrome Performance面板分析渲染性能

React开发指南：核心、实践与案例

文章目录一、React核心架构与设计哲学1.1 虚拟DOM与Diff算法1.2 JSX编译原理1.3 组件化设计模式1.4 Fiber架构解析1.5 组件生命周期（类组件） 二、React核心特性详解2.1 数据流管理2.2 Hooks革命2.3 Context API进阶2.4 自定义Hooks设计模式三、React 1…...

编程日记 2025/8/16 9:42:52

落雪音乐Pro 8.8.6 | 内置8条音源，无需手动导入，纯净无广告

洛雪音乐Pro版内置多组稳定音源接口，省去手动导入的繁琐操作，安装即可畅听海量音乐。延续原版无广告的纯净体验，支持歌单推荐与音源切换，满足个性化听歌需求。此版本仅支持在线播放，无法下载音乐，且与原版不…...

编程日记 2025/8/16 9:42:49

Java入职篇（1）——心态篇

Java入职篇（1）——心态篇本人终于通过辛苦的学习以及经过大量的面试，终于拿到一份offer了！，但是的有点担心入职之后，不能胜任工作，不能安全度过试用期。在入职后能够顺利渡过刚开始最难熬的实…...

编程日记 2025/8/16 9:44:02

【后端】【django】Django DRF `@action` 详解：自定义 ViewSet 方法

Django DRF action 详解：自定义 ViewSet 方法在 Django REST Framework（DRF）中，action 装饰器用于为 ViewSet 添加自定义的 API 端点。相比于 update、create 等默认方法，action 允许我们定义更加清晰、语义化的 A…...

编程日记 2025/8/16 9:43:55

【Vue.js】

一、简介 1、概述官网GitHub - Vuejs Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 Vue.js作为一个渐进式框架，其设计理…...

编程日记 2025/8/16 9:43:07

SSL 和 TLS 认证

SSL（Secure Sockets Layer，安全套接层）认证是一种用于加密网络通信和验证服务器身份的安全技术。它是TLS（Transport Layer Security，传输层安全协议）的前身，虽然现在大多数应用使用的是TLS&…...

编程日记 2025/8/16 7:51:41

可复用表格组件设计与实现：分页、排序、筛选全功能解析

文章目录一、组件设计思路1.1 功能需求分析1.2 技术选型二、组件架构设计2.1 组件结构2.2 数据流设计三、核心代码实现3.1 基础表格组件3.2 状态管理四、功能模块实现4.1 分页组件4.2 排序控制4.3 筛选控制五、性能优化方案5.1 虚拟滚动5.2 防抖筛选六、完整测试方案6.1 …...

编程日记 2025/8/15 21:30:56

SmartFormat：轻量级文本模板库，轻松替代 string.Format

推荐一个 C# 编写的轻量级文本模板库，可以作为 string.Format 的替代品。 01 项目简介 SmartFormat不仅继承了 string.Format 的功能，还扩展了更多高级特性，例如命名占位符、列表格式化、本地化支持、复数化等。SmartFormat 提供了高性能、…...

编程日记 2025/8/16 13:03:20

【贪心算法4】

力扣452.用最少数量的剪引爆气球链接: link 思路这道题的第一想法就是如果气球重叠得越多那么用箭越少，所以先将气球按照开始坐标从小到大排序，遇到有重叠的气球，在重叠区域右边界最小值之前的区域一定需要一支箭，这道题有两…...

编程日记 2025/8/16 9:43:00

ES 使用geo point 查询离目标地址最近的数据

需求描述：项目中需要通过经纬度坐标查询目标地所在的行政区。解决思路大致有种，使用es和mysql分别查询。 1、使用es进行查询将带有经纬度坐标的省市区数据存入es中，mappings字段使用geo point类型，索引及查询dsl如下。 geo p…...

编程日记 2025/8/15 19:56:12

CentOS7 服务器安装 Hadoop 和 Hive

CentOS 服务器安装 Hadoop 和 Hive流程请将以下的路径更换为自己的路径 1. 环境准备 1.1 安装 JDK Hadoop 和 Hive 需要 Java 运行环境，这里安装 OpenJDK 1.8： # 查看 Java 版本 java -version1.2 创建 Hadoop 用户（可选） …...

编程日记 2025/8/15 23:04:18

C语言零基础入门：嵌入式系统开发之旅

C语言零基础入门：嵌入式系统开发之旅一、引言嵌入式系统开发是当今科技领域中一个极具魅力和挑战性的方向。从智能家居设备到汽车电子系统，从智能穿戴设备到工业自动化控制，嵌入式系统无处不在。而C语言，作为嵌入式开发中最常…...

编程日记 2025/8/16 9:43:26

【数据分享】1999—2023年地级市地方一般公共预算收支状况数据（科学技术支出/教育支出等）

在之前的文章中，我们分享过基于2000-2024年《中国城市统计年鉴》整理的1999-2023年地级市的人口相关数据、染物排放和环境治理相关数据、房地产投资情况和商品房销售面积相关指标数据和社会消费品零售总额和年末金融机构存贷款余额（均可查看之前的文章获…...

编程日记 2025/8/16 9:44:03

直方图（信息学奥赛一本通-1115）

【题目描述】给定一个非负整数数组，统计里面每一个数的出现次数。我们只统计到数组里最大的数。假设 Fmax（Fmax<10000）是数组里最大的数，那么我们只统计{0,1,2.....Fmax}里每个数出现的次数。【输入】第一行n是数组的大小。…...

编程日记 2025/8/15 22:32:29

基于NXP+FPGA轨道交通人机交互（HMI）和健康管理单元（PHM）解决方案

人机接口 (HMI) 是交互式显示设备，可用于司机和乘务员的交互式信息显示。也可以用于CCTV监视。满足多种接口设备连接的同时，搭载的Linux系统，可以满足客户的定制化需求。关键特性触摸式按键位于显示区域周围，耐用性好&#xff0…...

编程日记 2025/8/16 11:39:06

宇树与智元的崛起：机器人“灵魂”注入的技术密码

目录机器人运动的基石：大扭矩与平衡术大扭矩：力量的源泉平衡术：动态平衡的艺术从运动到智能：AI学习的“灵魂”注入强化学习：试错中的成长模仿学习：站在巨人的肩膀上数据与知识共享&#xff1…...

编程日记 2025/8/16 11:17:10

TCP 全连接队列内核层理解socket

TCP 全连接队列理解 listen 的第二个参数 int listen(int sockfd, int backlog);backlog 参数表示全连接队列（accept 队列）的最大长度。那什么是全连接队列呢？ 三次握手 & accept() 处理流程客户端发送 SYN，服务器收到并…...

编程日记 2025/8/16 15:59:02

成功破解加密机制，研究人员解锁LinuxESXi Akira勒索软件

一位网络安全研究人员成功破解了Akira勒索软件在Linux/ESXi系统中的加密机制，使得受害者无需支付赎金即可恢复数据。这一突破利用了勒索软件加密方法中的关键漏洞。据研究人员介绍，该恶意软件使用纳秒级的时间戳作为加密过程中的种子，这使其…...

编程日记 2025/8/15 19:56:41

vue2：el-table列中文字前面加icon图标的两种方式

1、文字前面加icon <el-table-column label="姓名" align="left" prop="nickName"><template #default="{ row }"><i v-if="row.sync" class="el-icon-lock"></i><span>{{ row.nic…...

编程日记 2025/8/16 10:36:21

深入探索Android Bitmap：从原理到实战

一、Bitmap 是什么在 Android 开发中，Bitmap 是极为重要的基石。简单来说，Bitmap 代表位图，是图片在内存里的具体呈现形式 ，任何诸如 JPEG、PNG、WEBP 等格式的图片，一旦被加载到内存中，就会以 Bitmap 对…...

编程日记 2025/8/16 12:06:38

软考计算机知识-流水线

计算机流水线类似工业生产过程的流水线，在同一时间，m个部件进行不同的操作，完成对不同对象的处理。理解重叠：让不同的指令在时间上重叠地解释。在解释第k条指令的操作完成之前，就可以开始解释第k1条指令。题1&#…...

编程日记 2025/8/16 12:21:28

【Linux】从互斥原理到C++ RAII封装实践

📢博客主页：https://blog.csdn.net/2301_779549673 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ 📢本文由 JohnKi 原创，首发于 CSDN🙉 📢未来很长&#…...

编程日记 2025/8/16 12:47:17

【哈希表与字符串的算法之路：思路与实现】—— LeetCode

文章目录两数之和面试题01.02.判定是否为字符重排存在重复元素存在重复元素||字母异位词分组最长公共前缀和最长回文子串二进制求和字符串相乘两数之和这题的思路很简单，在读完题目之后，便可以想到暴力枚举，直接遍历整个数组两遍即可&…...

编程日记 2025/8/16 11:13:04

rdiff-backup备份

目录 1. 服务器备份知识点 1.1 备份策略 1.2 备份步骤和宝塔面板简介 1.3 CentOS7重要目录 2. 备份工具 2.1 tar -g 备份演示 2. rsync 备份演示 3. rdiff-backup 备份演示 4. 差异和优缺点 3. rdiff-backup安装和使用 3.1 备份命令rdiff-backup 3.2 恢复命令--…...

编程日记 2025/8/16 12:53:03

Netty基础—4.NIO的使用简介一

大纲 1.Buffer缓冲区 2.Channel通道 3.BIO编程 4.伪异步IO编程 5.改造程序以支持长连接 6.NIO三大核心组件 7.NIO服务端的创建流程 8.NIO客户端的创建流程 9.NIO优点总结 10.NIO问题总结 1.Buffer缓冲区 (1)Buffer缓冲区的作用 (2)Buffer缓冲区的4个核心概念 (3)使…...

编程日记 2025/8/16 12:51:48

贪心算法简介（greed）

前言： 贪心算法（Greedy Algorithm）是一种在每个决策阶段都选择当前最优解的算法策略，通过局部最优的累积来寻求全局最优解。其本质是"短视"策略，不回溯已做选择。什么是贪心、如何来理解贪心(个人对贪心的…...

编程日记 2025/8/16 11:46:13

驻场运维服务方案书（Word文件）

目录第一章背景分析 1.1. 项目背景 1.2. 项目目标 1.3. 系统现状 1.3.1. 网络系统 1.3.2. 设备清单梳理 1.3.3. 应用系统第二章需求分析及理解 2.1. 在重要日期能保障信息系统安全 2.2. 信息系统可长期安全、持续、稳定的运行 2.3. 提升发现安全问题、解决安全…...

编程日记 2025/8/15 17:52:52

嵌入式硬件--开发工具-AD使用常用操作

ad16.1.12 1.如何显示/隐藏其他图层在pcb界面点击L--试图界面中找到“视图选项”--单层模式选择 not in single layer mode 在pcb界面点击L--试图界面中找到“视图选项”--单层模式选择 gray scale other layers 【Altium】AD如何只显示一层，隐藏其他层显示&…...

编程日记 2025/8/16 11:26:41

在 Ubuntu 上安装和配置 Docker 的完整指南

Docker 是一个开源的平台，旨在简化应用程序的开发、部署和运行。通过将应用程序及其依赖项打包到容器中，Docker 确保应用程序可以在任何环境中一致地运行。目录前言安装前的准备安装 Docker 步骤 1：更新包索引步骤 2：安装必要…...

编程日记 2025/8/16 11:09:17

微服务全局ID方案汇总

自增id 对于大多数系统来说，使用mysql的自增id当作主键再最合适不过了。在数据库层面就可以获取一个顺序的、唯一的、空间占用少的id。自增id需要是 int、bigint这些整数类型，uint 支持 40 亿的数据量，bigint unsign（0 &#x…...

编程日记 2025/8/16 11:17:49

实验5 逻辑回归

实验5 逻辑回归【实验目的】掌握逻辑回归算法【实验内容】处理样本，使用逻辑回归算法进行参数估计，并画出分类边界【实验要求】写明实验步骤，必要时补充截图 1、参照“2.1梯度下降法实现线性逻辑回归.ipynb”和“2.2 sklearn实现线性逻辑…...

编程日记 2025/8/16 12:20:56

【原创】在高性能服务器上，使用受限用户运行Nginx，充当反向代理服务器[未完待续]

1 起因在公共高性能服务器上运行OllamaDeepSeek，如果按照默认配置启动Ollama程序，则自己在远程无法连接你启动的Ollama服务。如果修改掉默认的配置，则会遇到你的Ollama被他人完全控制的安全风险。不过，我们可以使用一个方向…...

编程日记 2025/8/16 12:40:28

Linux 下 MySQL 8 搭建教程

一、下载你可以从 MySQL 官方下载地址下载所需的 MySQL 安装包。二、环境准备 1. 查看 MySQL 是否存在使用以下命令查看系统中是否已经安装了 MySQL： rpm -qa|grep -i mysql2. 清空 /etc/ 目录下的 my.cnf 执行以下命令删除 my.cnf 文件： [roo…...

编程日记 2025/8/16 12:19:29

vue 仿deepseek前端开发一个对话界面

后端：调用deepseek的api，所以返回数据格式和deepseek相同 {"model": "DeepSeek-R1-Distill-Qwen-1.5B", "choices": [{"index": 0, "delta": {"role": "assistant", "cont…...

编程日记 2025/8/16 9:53:39

MinIO问题总结（持续更新）

目录 Q: 之前使用正常，突然使用空间为0B，上传文件也是0B（部署在k8s中）Q: 无法上传大文件参考yaml Q: 之前使用正常，突然使用空间为0B，上传文件也是0B（部署在k8s中） A: 1、检查pod状态…...

编程日记 2025/8/16 10:41:09

STM32配套程序接线图

1 工程模板 2 LED闪烁 3LED流水灯 4蜂鸣器 5按键控制LED 6光敏传感器控制蜂鸣器 7OLED显示屏 8对射式红外传感器计次 9旋转编码器计次 10 定时器定时中断 11定时器外部时钟 12PWM驱动LED呼吸灯 13 PWM驱动舵机 14 PWM驱动直流电机 15输入捕获模式测频率 16PWMI模式测频率占空…...

编程日记 2025/8/16 12:05:06

深入理解Linux网络随笔（七）：容器网络虚拟化--Veth设备对

深入理解Linux网络随笔（七）：容器网络虚拟化微服务架构中服务被拆分成多个独立的容器，docker网络虚拟化的核心技术为：Veth设备对、Network Namespace、Bridg。 Veth设备对 veth设备是一种成对出现的虚拟网络接口&…...

编程日记 2025/8/16 13:03:55

实战指南：鸿蒙ArkTS中实现列表下拉刷新与触底加载的完整解析

前言： 在移动应用开发中，下拉刷新和触底加载更多是提升用户体验的核心功能。鸿蒙ArkUI框架通过Refresh组件和List组件的onReachEnd事件，为开发者提供了简洁高效的实现方案。本文将通过代码示例，详解如何利用ArkTS实现这两个功能。…...

编程日记 2025/8/16 9:45:03

【栈数据结构应用解析：常见算法题详细解答】—— Leetcode

文章目录栈的模拟实现删除字符串中的所有相邻重复项比较含退格的字符串基本计算器||字符串解码验证栈序列栈的模拟实现 #include <iostream>using namespace std;const int N 1e5 10;// 创建栈 int stk[N], n;// 进栈 - 本质就是顺序表里面的尾插 void push(int x) …...

编程日记 2025/8/16 11:34:12

Git常用操作之GitLab

Git常用操作之GitLab 小薛博客官网：小薛博客Git常用操作之GitLab官方地址 1、GitLab安装 https://gitlab.cn/install/ 1、Docker安装GitLab https://docs.gitlab.cn/jh/install/docker.html 1、设置卷位置在设置其他所有内容之前，请配置一个新的…...

编程日记 2025/8/15 14:21:20

2025探索短剧行业新可能报告40+份汇总解读|附PDF下载

原文链接：https://tecdat.cn/?p41043 近年来，短剧以其紧凑的剧情、碎片化的观看体验，迅速吸引了大量用户。百度作为互联网巨头，在短剧领域积极布局。从早期建立行业专属模型冷启动，到如今构建完整的商业生态&#xf…...

编程日记 2025/8/16 5:35:13

各省水资源平台水资源遥测终端机都用什么协议

各个省水资源平台水资源遥测终端机的建设大部分从2012年开始启动，经过多年建设，基本都已经形成了稳定的通讯要求；河北瑾航科技遥测终端机，兼容了大部分省市的通讯协议，如果需要，可以咨询和互相学习&…...

编程日记 2025/8/16 11:46:17

C#+EF+SqlServer性能优化笔记

文章目录前言一、C#EF 代码优化1.接口代码改异步2.查询异步，只查询需要的数据3.查询数据判断时4.直接使用sql查询二、数据库优化1.减少关联表，一些基础数据，字典表可以考虑放到redis中，在代码中映射2.增加索引，删除无…...

编程日记 2025/8/16 11:16:43

1、在initialize()方法里，获取列表控件，添加CreateListColumnsListener监听 public void initialize(){ BillList billlist(BillList)this.getControl("billlistap"); billlist.addCreateListColumnsListener(this::beforeCreateListColumns)…...

编程日记 2025/8/16 13:06:43

电机控制常见面试问题（十二）

文章目录一.电机锁相环1.理解锁相环2.电机控制中的锁相环应用3.数字锁相环（DPLL） vs 模拟锁相环（APLL）4.锁相环设计的关键技术挑战5.总结二、磁链观测1.什么是磁链？2.为什么要观测磁链？3.怎么观测磁链&am…...

编程日记 2025/8/16 9:43:02

芯驿电子 ALINX 亮相德国纽伦堡，Embedded World 2025 精彩回顾

2025年3月13日，全球规模最大的嵌入式行业盛会——德国纽伦堡国际嵌入式展（embedded world 2025）圆满落幕。在这场汇聚全球 950 家展商、3 万余专业观众的科技盛宴中，芯驿电子 ALINX 展位人头攒动，多款尖端产品吸引客户…...

编程日记 2025/8/16 6:00:21

西门子S7-1200 PLC远程上下载程序方案

西门子S7-1200 PLC远程上下载程序方案（巨控GRM552YW-C模块） 三步完成配置 | 全球适用 | 稳定高效三步快速完成远程配置硬件部署准备巨控GRM552YW-CHE模块1台，通过网口连接西门子S7-1200 PLC以太网口。模块支持4G/5G/Wi-Fi/网线接入外网…...

编程日记 2025/8/16 10:36:31

MFC窗口的创建/消息映射机制

mfc.h #include<afxwin.h>//mfc头文件//应用程序类 class MyApp:public CWinApp //继承于应用程序类 { public://程序入口virtual BOOL InitInstance(); };//框架类 class MyFrame:public CFrameWnd { public:MyFrame();//声明宏提供消息映射机制DECLARE_MESSAGE_MAP()…...

编程日记 2025/8/16 9:45:02

【每日学点HarmonyOS Next知识】tab对齐、相对布局、自定义弹窗全屏、动画集合、回到桌面

1、HarmonyOS Tabs 是否能支持 tabbar 居左对齐？ 当前方案为自定义tabbar实现，示例demo： Entry Component struct TabsExample {State tabArray: Array<number> [0, 1,2]State focusIndex: number 0State pre: number 0State inde…...

编程日记 2025/8/16 11:28:03

如何在TikTok网页版切换地区设置

今天我们来聊聊如何在TikTok网页版上更改地区设置。TikTok作为全球知名的短视频社交应用，不仅仅局限于某个国家或地区。修改地区设置可以让你探索来自不同地方的内容，享受更为丰富的社交互动体验。那么，具体该如何操作呢？让我一步…...

编程日记 2025/8/15 18:41:47