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

【React全栈进阶】从组件设计到性能优化实战指南

news 来源：原创 2025/6/26 20:23:45

目录

    • 🌟 前言
      • 🏗️ 技术背景与价值
      • 🩹 当前技术痛点
      • 🛠️ 解决方案概述
      • 👥 目标读者说明
    • 🧠 一、技术原理剖析
      • 📊 核心概念图解
      • 💡 核心作用讲解
      • 🔧 关键技术模块说明
      • ⚖️ 技术选型对比
    • 🛠️ 二、实战演示
      • ⚙️ 环境配置要求
      • 💻 核心代码实现
        • 案例1：高性能列表（虚拟滚动）
        • 案例2：状态管理（Redux Toolkit）
        • 案例3：数据请求（React Query）
      • ✅ 运行结果验证
    • ⚡ 三、性能对比
      • 📝 测试方法论
      • 📊 量化数据对比
      • 📌 结果分析
    • 🏆 四、最佳实践
      • ✅ 推荐方案
      • ❌ 常见错误
      • 🐞 调试技巧
    • 🌐 五、应用场景扩展
      • 🏢 适用领域
      • 🚀 创新应用方向
      • 🧰 生态工具链
    • ✨ 结语
      • ⚠️ 技术局限性
      • 🔮 未来发展趋势
      • 📚 学习资源推荐

🌟 前言

🏗️ 技术背景与价值

React作为Meta开源的UI库，全球使用率超80%（2023 State of JS报告）。其组件化思想和虚拟DOM机制，显著提升了复杂应用的开发效率和渲染性能。

🩹 当前技术痛点

  1. 状态管理混乱：组件间数据流难以追踪
  2. 渲染性能瓶颈：不必要的重复渲染
  3. SSR支持不足：SEO优化困难
  4. 类型安全缺失：大型项目维护成本高

🛠️ 解决方案概述

  • 函数组件+Hooks：简化状态逻辑
  • 并发渲染：提升交互响应
  • Next.js集成：开箱即用SSR
  • TypeScript强类型：增强代码健壮性

👥 目标读者说明

  • 🐱‍💻 1-3年前端开发者
  • 🏢 企业级应用架构师
  • 📱 全栈工程师（Node.js + React）
  • 🎨 UI组件库开发者

🧠 一、技术原理剖析

📊 核心概念图解
用户交互
JSX
虚拟DOM
Diff算法
DOM更新

💡 核心作用讲解

React如同"智能UI工厂"：

  1. 组件化生产：将界面拆分为独立零件
  2. 虚拟DOM质检：计算最小变更集
  3. 并发流水线：优先处理高优先级更新

🔧 关键技术模块说明

模块核心功能典型API
Fiber架构可中断渲染requestIdleCallback
Hooks系统状态逻辑复用useState/useEffect
并发模式优先级调度startTransition
服务端渲染首屏加速renderToString

⚖️ 技术选型对比

特性ReactVue 3Svelte
学习曲线中等平缓陡峭
性能优（虚拟DOM）优（编译优化）极佳（无运行时）
生态规模极大大中等
移动端支持React NativeWeex无

🛠️ 二、实战演示

⚙️ 环境配置要求

npx create-react-app my-app --template typescript
cd my-app && npm install @reduxjs/toolkit next react-query

💻 核心代码实现

案例1：高性能列表（虚拟滚动）
import { FixedSizeList } from 'react-window';const Row = ({ index, style }: {index: number, style: React.CSSProperties}) => (<div style={style}>Row {index}</div>
);const App = () => (<FixedSizeListheight={600}width={300}itemSize={50}itemCount={1000}>{Row}</FixedSizeList>
);
案例2：状态管理（Redux Toolkit）
// store.ts
import { configureStore } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: state => state + 1}
});export const store = configureStore({reducer: counterSlice.reducer
});// Component.tsx
const Counter = () => {const count = useSelector(state => state);const dispatch = useDispatch();return <button onClick={() => dispatch(increment())}>{count}</button>;
}
案例3：数据请求（React Query）
import { useQuery } from 'react-query';const fetchUser = async () => {const res = await fetch('/api/user');return res.json();
};const UserProfile = () => {const { data, isLoading } = useQuery('user', fetchUser);return isLoading ? (<Spinner />) : (<div>{data.name}</div>);
};

✅ 运行结果验证

  1. 虚拟滚动：渲染1000条数据仅占用5个DOM节点
  2. Redux状态：点击按钮计数器正确递增
  3. 数据请求：自动缓存并显示加载状态

⚡ 三、性能对比

📝 测试方法论

  • 测试场景：万级数据表格渲染
  • 对比方案：原生DOM vs 虚拟DOM
  • 测量指标：FPS/内存占用/TTI

📊 量化数据对比

方案首次渲染(ms)滚动FPS内存(MB)
原生DOM320012450
React虚拟DOM120058210
虚拟滚动1806085

📌 结果分析

虚拟滚动方案性能最优，内存占用降低81%，适合数据密集型应用。

🏆 四、最佳实践

✅ 推荐方案

  1. 组件设计模式
// 受控组件+React.memo优化
const MemoInput = React.memo(({value, onChange}: {value: string, onChange: (v:string)=>void}) => (<input value={value} onChange={(e) => onChange(e.target.value)} />
));
  1. Hooks封装
// 自定义Hook封装数据逻辑
function useUserData(userId: string) {const [data, setData] = useState(null);useEffect(() => {fetchUser(userId).then(setData);}, [userId]);return data;
}

❌ 常见错误

  1. 滥用useEffect
// 错误：不必要的依赖项
useEffect(() => {fetchData();
}, [props]); // 应明确依赖项如[props.id]
  1. 直接修改state
// 错误：违反不可变原则
const [list, setList] = useState([]);
list.push(newItem); // 应使用setList([...list, newItem])

🐞 调试技巧

  1. React DevTools：检查组件树和状态
  2. 性能分析：
<Profiler id="App" onRender={(id, phase, actualTime) => {console.log(`${id}渲染耗时: ${actualTime}ms`);
}}><App />
</Profiler>

🌐 五、应用场景扩展

🏢 适用领域

  • 后台管理系统（Ant Design Pro）
  • 数据可视化（Echarts集成）
  • 跨端应用（React Native）
  • 微前端架构（Module Federation）

🚀 创新应用方向

  • WebAssembly高性能计算
  • 3D可视化（React Three Fiber）
  • AI辅助代码生成（GitHub Copilot）

🧰 生态工具链

类型工具
框架Next.js/Gatsby
状态管理Redux/Zustand
样式方案Tailwind/CSS-in-JS
测试Jest/Testing Library

✨ 结语

⚠️ 技术局限性

  • 虚拟DOM内存开销
  • 复杂动画支持不足
  • 学习曲线陡峭

🔮 未来发展趋势

  1. 服务端组件（Server Components）
  2. 编译时优化（React Forget）
  3. WebGPU集成

📚 学习资源推荐

  1. 官方文档：React Beta Docs
  2. 经典书籍：《深入React技术栈》
  3. 实战课程：Epic React
  4. 组件库：Material UI/Ant Design

“React不是框架，而是让你构建框架的工具。”
—— Dan Abramov（Redux作者）

推荐开发环境：

# 使用Vite加速构建
npm create vite@latest my-react-app --template react-ts

相关文章：

【React全栈进阶】从组件设计到性能优化实战指南

目录 &#x1f31f; 前言&#x1f3d7;️ 技术背景与价值&#x1fa79; 当前技术痛点&#x1f6e0;️ 解决方案概述&#x1f465; 目标读者说明 &#x1f9e0; 一、技术原理剖析&#x1f4ca; 核心概念图解&#x1f4a1; 核心作用讲解&#x1f527; 关键技术模块说明⚖️ 技术选…...

编程日记 2025/6/26 20:23:45

基于EFISH-SCB-RK3576/SAIL-RK3576的消防机器人控制器技术方案‌

&#xff08;国产化替代J1900的应急救援智能化解决方案&#xff09; 一、硬件架构设计‌ ‌极端环境防护系统‌ ‌防爆耐高温设计‌&#xff1a; 采用陶瓷纤维复合装甲&#xff08;耐温1200℃持续1小时&#xff09;&#xff0c;通过GB 26784-2023消防设备防爆认证IP68防护等级…...

编程日记 2025/6/22 12:55:03

插件双更新：LeetCode 刷题支持正式上线，JetBrains IDE 插件持续升级！

为了让更多开发者在真实开发与算法练习中体验 MoonBit 的高效表达与编译性能&#xff0c;MoonBit 语言现已实现对 JetBrains 开发环境与 LeetCode 答题平台的全面支持&#xff01; 无论你是习惯用 IDE 编写项目的开发者&#xff0c;还是希望通过 LeetCode 刷题提升算法能力的程…...

编程日记 2025/6/26 20:18:05

编译OpenSSL时报错，Can‘t locate IPC/Cmd.pm in @INC perl环境

Unix / Linux / macOS $ ./Configure $ make $ make test1、make Can‘t locate IPC/Cmd.pm in INC [ Downloads ] - /source/index.html https://www.openssl.org/source/ yum -y install perl-IPC-Cmd 2.make test Can’t locate Test/More.pm in INC perl环境 yum -…...

编程日记 2025/6/23 18:48:02

新型智慧园区技术架构深度解析：数字孪生与零碳科技的融合实践

&#x1f3ed;在杭州亚运村零碳园区&#xff0c;光伏板与氢燃料大巴构成的能源网络&#xff0c;正通过数字孪生技术实现智能调度。这不仅是格力电器与龙源电力在新能源领域的创新实践&#xff0c;更是智慧园区4.0时代的标杆案例。当AI算法开始接管能源调度&#xff0c;当BIM建模…...

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

2025全网首发：ComfyUI整合GPT-Image-1完全指南 - 8步实现AI图像创作革命

ComfyUI整合GPT-Image-1完全指南&#xff1a;8步实现AI图像创作革命【2025最新】 OpenAI最新发布的GPT-Image-1模型&#xff08;也就是ChatGPT-4o背后的图像生成技术&#xff09;已经通过API开放使用&#xff0c;而令人惊喜的是&#xff0c;ComfyUI已经第一时间提供了完整支持&…...

编程日记 2025/6/25 13:57:12

AWS Elastic Beanstalk控制台部署Spring极简工程

问题 上次通过EB CLI工具没有成功在AWS中国云部署成功&#xff0c;这次通过EB web控制台来部署。 步骤 接着上次部署失败的Spring工程&#xff1a;AWS Elastic Beanstalk部署极简Spring工程&#xff08;EB CLI失败版&#xff09;&#xff0c;准备好jar文件。 创建ec2私钥文…...

编程日记 2025/6/22 1:52:07

力扣-236.二叉树的最近公共祖先

题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以…...

编程日记 2025/6/23 18:01:40

LeetCode 3337.字符串转换后的长度 II：矩阵快速幂(也没有想象中的那么高级啦)

【LetMeFly】3337.字符串转换后的长度 II&#xff1a;矩阵快速幂(也没有想象中的那么高级啦) 力扣题目链接&#xff1a;https://leetcode.cn/problems/total-characters-in-string-after-transformations-ii/ 给你一个由小写英文字母组成的字符串 s&#xff0c;一个整数 t 表…...

编程日记 2025/6/23 4:45:45

【iOS】源码阅读(四)——isa与类关联的原理

文章目录 前言OC对象本质探索clang探索对象本质objc_setProperty源码探索 cls与类的关联原理为什么说bits与cls为互斥关系isa的类型isa_t原理探索isa与类的关联 总结 前言 本篇文章主要是笔者在学习和理解类与isa的关联关系时所写的笔记。 OC对象本质探索 在学习和理解类与isa…...

编程日记 2025/6/24 13:46:03

elementUI 循环出来的表单，怎么做表单校验？

数据结构如下&#xff1a; diversionParamList: [ { length: null, positionNumber: null, value: null, } ] 思路&#xff1a;可根据 index 动态绑定 :props 属性值&#xff0c;校验规则写在:rules <div class"config-item" v-for"(item, index) in form.…...

编程日记 2025/6/25 11:49:15

蓝桥杯11届国B 约数

题目描述 定义阶乘 n!123⋅⋅⋅n。 请问 100! &#xff08;100 的阶乘&#xff09;有多少个正约数 100! 是所有从 1 到 100 的数的乘积&#xff0c;因此&#xff1a; 质数 j 在 100! 中的总指数 质数 j 在 1 中的指数 质数 j 在 2 中的指数 ... 质数 j 在 100 中的指数 …...

编程日记 2025/6/25 14:59:19

【iOS】alloc的实际流程

目录 前言 为什么不按源码流程调用&#xff1f; alloc的调用流程 前言 在之前的博客中我们有学习到过alloc的底层原理&#xff0c;沿着源码一步步找到了alloc的调用链——alloc—>_objc_rootAlloc—>callAlloc—>_objc_rootAllocWithZone—>_class_createInstan…...

编程日记 2025/6/24 18:24:29

Maven clean 提示文件 java.io.IOException

Maven clean 提示文件 java.io.IOException 问题背景问题分析&处理问题总结 问题背景 今天在一个功能开发结束之后&#xff0c;准备通过Maven实现打包操作&#xff0c;然后打包完成后部署到测试环境进行测试。在IDEA开发工具&#xff0c;点击 clean 时提示 Failed to dele…...

编程日记 2025/6/23 1:45:43

QT 使用QPdfWriter和QPainter绘制PDF文件

QT如何生产pdf文件&#xff0c;网上有许多文章介绍&#xff0c;我也是看了网上的文章&#xff0c;看他们的代码&#xff0c;自己琢磨琢磨&#xff0c;才有了本编博客&#xff1b; 其他什么就不详细说了&#xff0c;本篇博客介绍的QPdfWriter和QPainter绘制PDF文件&#xff1b;…...

编程日记 2025/6/23 22:38:22

解密企业级大模型智能体Agentic AI 关键技术：MCP、A2A、Reasoning LLMs- Manus技术解密

解密企业级大模型智能体Agentic AI 关键技术&#xff1a;MCP、A2A、Reasoning LLMs- Manus技术解密 如果你从应用程序的角度讲&#xff0c;但是如果我们从模型的角度讲&#xff0c;我们必须让模型既具有这种思考的能力&#xff0c;也具有产出这种最佳的action的这种能力。而且…...

编程日记 2025/6/24 22:41:46

网络安全-等级保护(等保) 2-4 GB/T 22239-2019 《信息安全技术 网络安全等级保护基础要求》-2019-05-10发布【现行】

################################################################################ 等级确定之后&#xff0c;需要根据不同的安全等级满足相关建设要求&#xff0c;《等级保护基础要求》明确了安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心、安全管…...

编程日记 2025/6/23 18:13:12

Ansys Zemax | 在 MATLAB 或 Python 中使用 ZOS-API 进行光线追迹的批次处理

附件下载 联系工作人员获取附件 这篇文章会说明如何在 MATLAB 或 Python 中以 Zemax OpticStudio 应用程式界面 (ZOS-API)处理光线数据库(Ray Database, ZRD)档案&#xff0c;过程中我们将使用ZRDLoader.dll。本文提供了在 Matlab 中批次处理序列光线追迹(一般、归一化、偏振…...

编程日记 2025/6/26 12:38:21

多链互操作性标准解析：构建下一代区块链互联生态

引言 在区块链技术快速演进的今天&#xff0c;“多链宇宙”已成为不可逆的趋势。然而&#xff0c;链与链之间的孤立性导致流动性割裂、开发成本高昂和用户体验碎片化。互操作性标准的制定&#xff0c;正是打破这一僵局的核心钥匙。本文将深入探讨主流互操作性协议的技术架构、…...

编程日记 2025/6/26 20:12:32

openEuler24.03 LTS下安装MySQL8.0.42

目录 前提步骤 删除原有mysql及maridb数据库 安装MySQL 启动MySQL 启动查看MySQL状态 设置MySQL开机自启动 查看登录密码 登录MySQL 修改密码及支持远程连接 远程连接MySQL 前提步骤 拥有openEuler24.03 LTS环境&#xff0c;可参考&#xff1a;Vmware下安装openEule…...

编程日记 2025/6/26 20:13:44

React 轻量级富文本编辑器推荐（中文版）

以下是几款适合集成到 React 项目中的轻量级富文本编辑器&#xff0c;特别针对中文用户优化推荐&#xff1a; 超轻量级选择&#xff08;小于100KB&#xff09; 1. react-simplemde-editor&#xff08;Markdown编辑器&#xff09; 特点&#xff1a;专为 Markdown 设计&#xf…...

编程日记 2025/6/26 20:16:20

React 第四十一节Router 中 useActionData 使用方法案例以及注意事项

一、useActionData前言 useActionData 是 React Router 提供的一个钩子函数&#xff0c;用于获取在路由的 action 函数中返回的数据。它通常与表单提交&#xff08;通过 <Form> 组件&#xff09;配合使用&#xff0c;用于处理表单提交后的服务器响应数据&#xff08;如错…...

编程日记 2025/6/26 20:15:01

西门子 Teamcenter13 Eclipse RCP 开发 1 工具栏

西门子 Teamcenter13 Eclipse RCP 开发 1 工具栏 1 配置文件2 插件控制3 命令框架 1 配置文件 在 Teamcenter 13 Eclipse RCP 开发中&#xff0c;plugin.xml 是插件的核心配置文件&#xff0c;定义了插件的&#xff1a; 1、唯一身份&#xff08;ID、版本&#xff09;。 2、所…...

编程日记 2025/6/26 20:20:58

【python实用小脚本-63】每天花费2小时修复黑白照片，Python一键转换，节省90%时间（建议收藏）

一、应用场景故事 上周&#xff0c;我的朋友小李从家里翻出了一堆老照片&#xff0c;这些照片大多是彩色的&#xff0c;但他想把它们转换成黑白风格&#xff0c;让照片更有复古感。他尝试用Photoshop一张张处理&#xff0c;但花了整整一个周末&#xff0c;才处理了不到一半的照…...

编程日记 2025/6/25 5:03:51

R语言的专业网站top5推荐

李升伟 以下是学习R语言的五个顶级专业网站推荐&#xff0c;涵盖教程、社区、资源库和最新动态&#xff1a; 1.R项目官网 (r-project.org) R语言的官方网站&#xff0c;提供软件下载、文档、手册和常见问题解答。特别适合初学者和高级用户&#xff0c;是获取R语言核心资源的…...

编程日记 2025/6/24 4:54:26

Apache JMeter API 接口压测技术指南

文章目录 前言技术积累JMeter 简介适用场景JMeter 核心组件 安装与配置线程组压测逐步加压压测安装相应jmeter 插件创建测试计划生成压测HTML 总结 前言 Apache JMeter 是一款开源的性能测试工具&#xff0c;主要用于对 Web 应用、API 接口、数据库等进行负载和压力测试。本指…...

编程日记 2025/6/25 14:44:02

【Java实战】IO流（转换流，打印流，数据流，序列化流）

引出问题 不同编码读取出现的乱码问题 如果是代码编码被读取的文本文件的编码是一致的&#xff0c;使用字符流读取文本文件时不会出现乱码&#xff1b; 如果不一致&#xff0c;使用字符流读取文本文件就会出现乱码。 public class BufferedReader{ public static void main(S…...

编程日记 2025/6/25 11:38:46

Python课程及开源项目推荐

Python课程及开源项目推荐 摘要&#xff1a;学习 Python 是一个非常好的选择&#xff0c;因为它是一种功能强大且易于上手的编程语言&#xff0c;广泛应用于数据分析、数据可视化、机器学习、网络爬虫等领域。以下是针对 Coursera 上 Python 课程和专业证书的推荐&#xff0c;以…...

编程日记 2025/6/26 1:08:17

内网互通原则详解！

目录 前言1. 路由 (Routing): 谁去哪儿找谁&#xff1f;&#x1f5fa;️2. 防火墙与安全组 (Firewalls & Security Groups): 门卫大爷和保安系统&#xff01;&#x1f46e;‍♂️&#x1f6aa;3. 内网 DNS (Internal DNS): 小区的通讯录/电话本&#xff01;&#x1f4d2;&a…...

编程日记 2025/6/24 21:55:58

[Harmony]大文件持久化

1.添加权限 在module.json5文件中添加权限 "requestPermissions": [{"name": "ohos.permission.READ_WRITE_USER_FILE", // 读写用户数据"reason": "$string:read_write_user_file_reason","usedScene": {"…...

编程日记 2025/6/26 16:46:00

C 语言实战：使用二维数组进行学生成绩统计与分析

各类资料学习下载合集 ​​https://pan.quark.cn/s/8c91ccb5a474​​ 在处理表格型数据时，二维数组是 C 语言中一种非常直观且强大的工具。学生成绩单就是一个典型的二维数据：每一行代表一个学生，每一列代表一门科目。本文将通过一个具体的案例，演示如何利用二维数组来存…...

编程日记 2025/6/26 20:20:57

[学习]RTKLib详解：tle.c（系列终章）

本文是 RTKLlib详解 系列文章的一篇&#xff0c;目前该系列文章还在持续总结写作中&#xff0c;以发表的如下&#xff0c;有兴趣的可以翻阅。 [学习] RTKlib详解&#xff1a;功能、工具与源码结构解析 [学习]RTKLib详解&#xff1a;pntpos.c与postpos.c [学习]RTKLib详解&…...

编程日记 2025/6/24 13:46:08

体重秤出口日本的计量认证介绍，体脂秤出口日本“正”认证介绍

什么是家庭专用测量仪器&#xff1f; 家庭专用测量仪器是一种非自动秤&#xff0c;主要用于普通消费者的日常生活&#xff0c;并且刻度为10 mg或更大&#xff0c;并且秤号的刻度为100或更大&#xff0c;满足以下条件的&#xff1a; 通用秤 是一种非自动秤&#xff0c;重量超过…...

编程日记 2025/6/25 9:19:43

【hadoop】Flume的相关介绍

1 概述 Flume是Cloudera开发的一个分布式的、可靠的、高可用的系统&#xff0c;它能够将不同数据源的海量日志数据进行高效收集、聚合、移动&#xff0c;最后存储到一个中心化的数据存储系统中。随着互联网的发展&#xff0c;特别是移动互联网的兴起&#xff0c;产生了海量的用…...

编程日记 2025/6/24 18:51:56

图片、音频、视频都能转？简鹿格式工厂了解一下

我们每天都会接触到各种各样的音视频和图片文件。无论是拍摄的照片、录制的视频&#xff0c;还是下载的音频资源&#xff0c;它们往往以不同的格式存在——有些适合分享&#xff0c;有些适合编辑&#xff0c;而有些则仅限特定设备或平台使用。格式不统一的问题&#xff0c;正在…...

编程日记 2025/6/26 20:07:38

doris节点数量规划

1.FE 节点数量​ FE 节点主要负责用户请求的接入、查询解析规划、元数据管理及节点管理等工作。 对于生产集群&#xff0c;一般建议部署至少 3 个节点的 FE 以实现高可用环境。FE 节点分为以下两种角色&#xff1a; Follower 节点&#xff1a;参与选举操作&#xff0c…...

编程日记 2025/6/26 20:10:15

Android Studio中Gradle 7.0上下项目配置及镜像修改

最近在打包一个测试项目的时候&#xff0c;使用的android studio版本比较老&#xff0c;后来升级到2024发现了一些小问题。可能对于安卓程序员来说&#xff0c;司空见惯&#xff0c;但对我这样的安卓小白&#xff0c;可把我折腾了半天。现在记录下来&#xff0c;供比我还小白的…...

编程日记 2025/6/22 11:28:29

Android Studio中Gradle中Task列表显示不全解决方案

问题现象 解决方案 File -> Settings -> Experimental ->勾选Configure all Gradle tasks during Gradle Sync(this can make Gradle Sync slower) 参考文章 Android执行build-gradle中的任务Task...

编程日记 2025/6/24 12:29:47

OneNote内容太多插入标记卡死的解决办法

OneNote内容太多插入标记卡死的解决办法 针对平板电脑的OneNote用户适合此类情况&#xff1a; 当向电脑导入几百页pdf可以正常使用&#xff0c;唯独插入标记的时候OneNote直接罢工&#xff0c;只能关闭。关闭时还可能会出现0x000000fxxxxx的错误。 注&#xff1a;仅对于平板…...

编程日记 2025/6/25 5:03:08

vue3:十三、分类管理-表格--行内按钮---行删除、批量删除实现功能实现

一、实现效果 增加行内按钮的样式效果，并且可以根绝父组件决定是否显示 增加行内删除功能、批量删除功能 二、增加行内按钮样式 1、增加视图层按钮 由于多个表格都含有按钮功能，所以这里直接在子组件中加入插槽按钮 首先增加表格行<el-table-column></el-table-…...

编程日记 2025/6/25 18:02:13

Python类的力量：第五篇：魔法方法与协议——让类拥有Python的“超能力”

文章目录 前言&#xff1a;从“普通对象”到“Python原生公民”的进化之路 一、魔法方法&#xff1a;赋予对象“超能力”的基因1. 构造与析构&#xff1a;对象生命周期的“魔法开关”2. 字符串表示&#xff1a;对象的“自我介绍”3. 运算符重载&#xff1a;让对象支持“数学魔法…...

编程日记 2025/6/26 1:14:43

R S的EMI接收机面板

图片摘自R & S官网。 根据您提供的第一张图&#xff08;设备前面板带屏幕的图像&#xff09;&#xff0c;这是 Rohde & Schwarz ESRP7 EMI Test Receiver 的正面显示界面&#xff0c;我将对屏幕上显示的参数逐项进行解读&#xff1a; &#x1f5a5;️ 屏幕参数解读 左…...

编程日记 2025/6/22 17:00:05

pytorch nn.RNN demo

之前已经讲过关于RNNCell的实现了. 这里用LLM写了一个简单的nn.RNN demo&#xff1a; import torch import torch.nn as nn# 设置随机种子以便结果可复现 torch.manual_seed(42)# 定义模型参数 input_size 4 # 输入特征维度 hidden_size 8 # 隐藏层维度 num_layer…...

编程日记 2025/6/24 7:34:59

高防服务器流量“清洗”什么意思

在当今数字化的时代&#xff0c;网络安全成为了备受关注的焦点。其中&#xff0c;高防服务器流量“清洗”这个概念&#xff0c;对于许多朋友来说可能还比较陌生。今天&#xff0c;就让我们一起来揭开它神秘的面纱。 首先&#xff0c;咱们得明白&#xff0c;高防服务器流量“清…...

编程日记 2025/6/23 18:48:10

Unity3D开发AI桌面精灵/宠物系列 【六】 人物模型 语音口型同步 LipSync 、梅尔频谱MFCC技术、支持中英文自定义编辑- 基于 C# 语言开发

Unity3D开发AI桌面精灵/宠物系列 【六】 人物模型 语音口型同步 LipSync 、梅尔频谱MFCC技术 C# 语言开发 该系列主要介绍怎么制作AI桌面宠物的流程&#xff0c;我会从项目开始创建初期到最终可以和AI宠物进行交互为止&#xff0c;项目已经开发完成&#xff0c;我会仔细梳理一下…...

编程日记 2025/6/24 10:39:11

Java详解LeetCode 热题 100(17):LeetCode 41. 缺失的第一个正数（First Missing Positive）详解

文章目录 1. 题目描述2. 理解题目3. 解法一&#xff1a;排序法&#xff08;不满足题目要求&#xff09;3.1 思路3.2 Java代码实现3.3 代码详解3.4 复杂度分析3.5 不足之处 4. 解法二&#xff1a;哈希表法4.1 思路4.2 Java代码实现4.3 代码详解4.4 复杂度分析4.5 不足之处 5. 解…...

编程日记 2025/6/23 6:34:06

Kafka消息路由分区机制深度解析：架构设计与实现原理

一、消息路由系统的核心架构哲学 1.1 分布式系统的三元悖论 在分布式消息系统的设计过程中&#xff0c;架构师需要平衡三个核心诉求&#xff1a;数据一致性、系统可用性和分区容忍性。Kafka的分区路由机制本质上是对CAP定理的实践解&#xff1a; 一致性维度&#xff1a;通过…...

编程日记 2025/5/16 7:10:54

用C语言实现了——一个基于顺序表的插入排序演示系统

一、知识要点、 插入排序是一种简单直观的排序算法&#xff0c;它的工作方式类似于我们整理扑克牌。 基本原理&#xff1a; 插入排序通过构建有序序列来工作。它每次从无序序列中取出一个元素&#xff0c;然后将其插入到已排序序列的适当位置。这个过程重复进行&#xff0c;…...

编程日记 2025/6/24 7:34:39

linux libdbus使用案例

以下是一个基于 Linux libdbus 的详细指南，包含服务端和客户端的完整代码示例，涵盖 方法调用、信号发送 和 异步消息处理。libdbus 是 D-Bus 的底层 C 库，直接操作 D-Bus 协议，适合需要精细控制的场景。 1. libdbus 的核心机制 连接管理：通过 dbus_bus_get 连接系统总线或…...

编程日记 2025/6/25 8:02:14

Apple Vision Pro空间视频创作革命：从180度叙事到沉浸式语法的重构——《Adventure》系列幕后技术深度解析

🌌 引言：沉浸式媒体的“语法实验室” Apple Vision Pro的推出标志着空间计算时代的到来，而《Adventure》系列作为其原生内容标杆，正在成为沉浸式叙事的“语法实验室”。导演Charlotte Mikkelborg与播客主持人Kent Bye的对话揭示了这一领域的技术突破、创作挑战与行业生态…...

编程日记 2025/6/24 4:54:50