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

Vue 人看 React useRef:它不只是替代 ref

如果你是从 Vue 转到 React 的开发者,初见 useRef 可能会想:这不就是 React 版的 ref 吗?但真相是 —— 它能做的,比你想象得多得多。

👀 Vue 人初见 useRef

在 Vue 中,ref 是我们访问 DOM 或响应式数据的利器。但在 React 中,useRef 并不止是一个获取 DOM 的工具,它更像是一个“不会引起重新渲染的变量容器”。

如果你在想:

  • “为啥我改了 ref.current,界面却没更新?”
  • “这玩意儿跟 Vue 的 ref 好像不太一样?”
  • “它除了操作 DOM 还能干嘛?”

这篇文章,就帮你用 Vue 人的视角,彻底搞懂 useRef 的多种用法与常见陷阱。


🔍 什么是 useRef

引入 React 文档的话:

useRef 是一个 React Hook,它能帮助引用一个不需要渲染的值”

useRef 创建的是一个普通的 Javascript 对象,里面仅有一个 current 属性,用于读取和修改。

import { useRef } from "react";function Example() {const countRef = useRef(0);countRef.current += 1;
}

useRef 是一个 可变的盒子,你可以把任何值塞进去,它不会重新触发组件 render,但你可以随时取用。

🧪 举个栗子:
export default function Example() {const countRef = useRef(0);console.log("render");return (<button onClick={() => (countRef.current += 1)}>点击count:{countRef.current}</button>);
}

我们创建一个按钮去给 countRef 进行自增,我们看看组件有没有重新 render

在这里插入图片描述

可以看到,虽然 countRef 数据自增了,但是却不会 触发新的渲染

“当你希望组件“记住”某些信息,但又不想让这些信息 触发新的渲染 时,你可以使用 useRef

如果你比较熟悉 useState,我们可以举个更简单的例子:

import { useState } from "react";export default function Example() {const [countRef, never] = useState({ current: 0 });return (<button onClick={() => (countRef.current += 1)}>点击count:{countRef.current}</button>);
}

原则上 useRef 可以在 useState 的基础上实现:

不使用setup函数去改变值,不去触发新的渲染。

了解了基本概念,我们再来看看它与 Vue 的 ref 有哪些关键不同。

⚔️ useRef 和 Vue ref 的区别

对比点useRefVue ref
响应性不具备响应性,不触发 render具备响应性,数据变化会更新视图
使用场景DOM引用、缓存变量、定时器、历史值等DOM引用、响应式数据
数据结构{ current: value }value 是响应式对象
是否引发视图更新

Vue 的 ref响应式容器,值变化会自动更新视图;

而 React 的 useRef 更像一个可读写但不具响应性的变量盒子。

🧩 useRef 常见使用场景

前面介绍完 useRef 的基本概念和使用方法,我们接下来看看平时开发中比较常见的使用场景:

1. 定时器引用

我们来实现一个 简易计时器

import { useState, useRef } from "react";export default function Example() {const [time, setTime] = useState(0);const timerRef = useRef(null);const handleStart = () => {if (timerRef.current) return;const startTime = Date.now();timerRef.current = setInterval(() => {setTime(Date.now() - startTime);}, 10);};const handleStop = () => {if (!timerRef.current) return;clearInterval(timerRef.current);timerRef.current = null;console.log("销毁定时器:", timerRef.current);};return (<><h1>计时器: {time}</h1><button onClick={handleStart}>开始</button><button onClick={handleStop}>停止</button></>);
}
  • 按下开始键,计时器 开始进行计时,这时候把定时器存到 timerRef
  • 按下停止键,销毁当前定时器,防止出现 闭包导致的内存泄漏

在这里插入图片描述

2. 操作 DOM

我们假定一个场景,用户进入页面时,我们需要用户光标默认 聚焦到输入框

import { useEffect, useRef } from "react";export default function Example() {const inputRef = useRef(null);useEffect(() => {inputRef.current?.focus();}, []);return <input ref={inputRef} />;
}

我们需要:

  • 使用 useRef 创建 inputRef,默认值为 null
  • 使用 ref={inputRef} 去存储当前 DOM 元素。
  • 通过 useEffect 在进入页面时进行 inputRef.current?.focus()

这里类似 Vue 的 ref="xxx" + this.$refs.xxx.focus()

注意: 不要在渲染过程中读取或写入ref.current,会使ref变得不可预测。

在这里插入图片描述

使用 ref 去存储正常的标签都能正常获取其 DOM 元素,但是当你尝试将 ref 放在 自定义组件 上,会发生什么呢?

3. 绑定自定义组件的 ref

我们先来实践一下:

import { useEffect, useRef } from "react";function MyInput(props) {return <input {...props} />;
}export default function Example() {const inputRef = useRef(null);useEffect(() => {inputRef.current?.focus();}, []);return <MyInput ref={inputRef} />;
}

我们创建一个 MyInput 子组件,然后把 ref 绑定到我们子组件上。

控制台直接给我们弹了报错:

在这里插入图片描述

React 向控制台打印一条错误消息,提示我们如果想操控子组件,需要去使用 forwardRef API。

forwardRef 的用法

  • forwardRef表示允许子组件将其 DOM 节点放入 ref 中,默认情况下是不允许的。
  • forwardRef会让传入的子组件多一个 ref 作为第二个参数传入,用于存储当前 DOM 节点,第一个参数为 props

我们改进下:

const MyInput = forwardRef((props, ref) => {return <input {...props} ref={ref} />;
});

我们将 ref 绑定到 MyInput 组件中的 input,再来看看效果:

在这里插入图片描述

现在不会报错了,并且 input 框也正常 聚焦 了。


总结

  • useRef 用于存储值且不想去触发 render 的场景。
  • useRef 创建的值通过 .current 去进行 读取、修改
  • 常见用于存储 定时器、 DOM 节点
  • 存储自定义组件的 DOM 节点需配合 forwardRef API 使用。
  • 需要注意 不要在渲染过程中读取或写入 ref.current

如果你也是从 Vue 转过来的,看到这里可能已经对 useRef 有了更清晰的认知 —— 它并不是 Vue 的 ref 替代品,而是一种完全不同思路下的状态管理补充工具

希望这篇文章能帮你快速掌握 useRef,如果你觉得有帮助,别忘了点个赞👍或关注我后续的 重学 React 系列!

相关文章:

Vue 人看 React useRef:它不只是替代 ref

如果你是从 Vue 转到 React 的开发者&#xff0c;初见 useRef 可能会想&#xff1a;这不就是 React 版的 ref 吗&#xff1f;但真相是 —— 它能做的&#xff0c;比你想象得多得多。 &#x1f440; Vue 人初见 useRef 在 Vue 中&#xff0c;ref 是我们访问 DOM 或响应式数据的…...

C++第三方库【JSON】nlohman/json

文章目录 优势使用API从文件中读取json从json文本创建json对象直接创建并操作json对象字符串 <> json对象文件流 <> json对象从迭代器读取像使用STL一样的访问STL容器转化为 json数组STL容器 转 json对象自定义类型转化为 json对象 限制 优势 直观的语法&#xff…...

从源码到实战:深度解析`rsync`增量同步机制与高级应用

从源码到实战&#xff1a;深度解析rsync增量同步机制与高级应用 #mermaid-svg-C1ZMwvhtq4iP4E8m {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-C1ZMwvhtq4iP4E8m .error-icon{fill:#552222;}#mermaid-svg-C1ZMwvht…...

数据库表设计五层分类系统表设计

文章目录 数据库表设计五层分类系统表设计代码思路详解类概述核心方法详解1. processString(String input) 方法2. createNo(String input, boolean peerNode) 方法3. isParent(String parentNo, String sonNo) 方法 编号系统设计使用场景推测代码特点可能的使用示例 NoProcess…...

Centos/RedHat 7.x服务器挂载ISCSI存储示例(无多路径非LVM)

客户让帮忙挂载个ISCSI存储&#xff0c;大概结构如下图所示&#xff1a; ISCSI存储为一台安装了truenas的X86服务器&#xff0c;提供存储服务的IP地址为10.16.0.1 服务器的ETH1网卡配置与10.16.0.1同段网络。 为了给客户做个简单培训&#xff0c;整理了一下操作步骤。下面是配…...

【android bluetooth 协议分析 21】【ble 介绍 2】【什么是IRK,是如何生成和传递的】

1. 什么是 IRK&#xff1f; IRK&#xff0c;全称 Identity Resolving Key&#xff08;身份解析密钥&#xff09;&#xff0c;是 BLE 设备用于生成和解析 Resolvable Private Address&#xff08;RPA&#xff09; 的密钥。 2. IRK 的生成和传递过程 IRK 是在 BLE 配对&#xf…...

4.14-4.15学习总结 IO流:缓冲流+转换流+序列化流+打印流+压缩流+Commons—io工具包+Hutool工具包

图片加密操作&#xff1a; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; public class test {public static void main(String[] args) throws IOException {FileInputStream fisnull;FileOutputStream fosnull;try{fisnew…...

Linux入门学习笔记

一、文件路径相关 相对路径与绝对路径 相对路径&#xff1a;是从当前工作目录开始表示文件或目录位置的路径。例如&#xff0c;当前在 /home/user 目录下&#xff0c;若要访问 user 目录下 test 文件夹中的 file.txt 文件&#xff0c;相对路径就是 test/file.txt 。它依赖于当…...

Redis适用场景

Redis适用场景 一、加速缓存二、会话管理三、排行榜和计数器四、消息队列五、实时分析六、分布式锁七、地理位置数据八、限流九、数据共享十、签到 一、加速缓存 Redis最常见的应用之一是作为缓存层&#xff0c;用于存储频繁访问的数据&#xff0c;从而减轻数据库的负载。 通过…...

# WPS打开新文档,“工具”菜单下是空白

WPS打开新文档&#xff0c;“工具”菜单下是空白 在 WPS 中打开新文档后 “工具” 菜单下空白&#xff0c;可能由多种原因导致&#xff0c;如下图&#xff1a; 下面分析并给出对应的解决办法&#xff1a; 一、 功能区显示设置问题 1、原因&#xff1a; WPS 的功能区显示可能…...

【软考-架构】13.3、架构复用-DSSA-ABSD

✨资料&文章更新✨ GitHub地址&#xff1a;https://github.com/tyronczt/system_architect 文章目录 1、软件架构复用2、特定领域软件架构DSSADSSA的三个基本活动参与DSSA的四种角色人员建立DSSA的过程三层次模型 考试真题第一题第二题 3、基于架构的软件开发ABSD的软件开发…...

K8S_ResourceQuota与LimitRange的作用

ResourceQuota 作用详解 资源总量控制&#xff1a;ResourceQuota能对命名空间内的资源使用总量进行限制。在一个Kubernetes集群中&#xff0c;存在多个命名空间&#xff0c;每个命名空间可看作一个独立的工作单元。通过设置ResourceQuota&#xff0c;可以防止某个命名空间过度…...

T101D加固平板电脑:无人机地面站的高效智能控制核心

随着无人机技术在应急救援、农业监测、军事侦察等领域的广泛应用&#xff0c;对地面控制设备的要求也日益提高。鲁成伟业推出的T101D加固平板电脑凭借其高性能、强防护和专业化设计&#xff0c;成为无人机地面站的核心控制终端&#xff0c;为复杂环境下的作业提供了可靠支持。 …...

LLM中的N-Gram、TF-IDF和Word embedding

文章目录 1. N-Gram和TF-IDF&#xff1a;通俗易懂的解析1.1 N-Gram&#xff1a;让AI学会"猜词"的技术1.1.1 基本概念1.1.2 工作原理1.1.3 常见类型1.1.4 应用场景1.1.5 优缺点 1.2 TF-IDF&#xff1a;衡量词语重要性的尺子1.2.1 基本概念1.2.2 计算公式1.2.3 为什么需…...

【基于Servlet技术处理表单】

文章目录 一、实验背景与目的二、实验设计与实现思路1. 功能架构2. 核心代码实现3. 测试用例 总结 一、实验背景与目的 本次实验旨在深入理解Servlet工作原理&#xff0c;掌握JSP与Servlet的协同开发&#xff0c;实现前端表单与后端数据处理的交互。具体目标包括&#xff1a;设…...

【差分隐私相关概念】瑞丽差分隐私(RDP)-瑞丽散度约束了贝叶斯因子后验变化

分步解释和答案&#xff1a; 在Rnyi差分隐私&#xff08;RDP&#xff09;框架中&#xff0c;通过贝叶斯因子和Rnyi散度的关系可以推导出关于后验变化的概率保证。以下是关键步骤的详细解释&#xff1a; 1. 贝叶斯因子的定义与分解 设相邻数据集 D D D 和 D ′ D D′&#x…...

Oracle查询大表的全部数据

2000w的大表 表结构如下&#xff0c;其中id是索引 查询处理慢的写法 List<String> queryLoidForPage(Integer startNum,Integer endNum){try {Connection oracleConnection initBean.oracleConnection;Statement stmt oracleConnection.createStatement();// 4.执行查…...

linux 内核 static-key机制分析

1、static key是什么 Linux内核的 Static Keys机制是一种高效的条件分支优化技术,主要用于在运行时动态启用或禁用特定代码路径,同时‌避免常规条件判断(如 if 语句)的性能开销‌。它通过结合编译时优化和运行时代码修补(如 Jump Label 技术)实现近乎零成本的开关切换,广泛应用…...

【Java学习】Knife4j使用流程

手动添加依赖&#xff0c;并刷新Maven <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi2-spring-boot-starter</artifactId><version>4.3.0</version> </dependency>在配置文件application.…...

Java 基本操作快速入门:理解与实践

在软件开发的世界里&#xff0c;Java 作为一种广泛使用的编程语言&#xff0c;已经成为构建企业级应用、移动应用甚至大型系统的主力军。对于任何一位初学者来说&#xff0c;理解 Java 的基本操作是学习编程的第一步。从变量声明到控制流的结构&#xff0c;每一个基础知识点都是…...

jetson orin nano 开发板conda 的 base 环境在 shell 启动时自动激活

使用MobaXterm_Personal_23.0.exe 连接jetson开发板时默认是不进入base环境的 1.输入此命令nano ~/.bashrc看到图1后把conda activate 你的环境名 放到图中标记位置 然后保存退出&#xff1a; Ctrl O 回车保存 Ctrl X 退出编辑器 输入此命令后&#xff0c;source ~/.bas…...

【高中数学/指数/对数】同构六君子之 x/e^x/lnx组合曲线

yx*e^x ye^x/x yx/e^x yx*lnx ylnx/x yx/lnx END...

Golang|在线排查协程泄漏

根据我们的代码&#xff0c;前5毫秒内&#xff0c;每隔1毫秒就会来一个请求&#xff0c;5毫秒之后由于前面的协程执行完&#xff0c;后面又会来新的协程&#xff0c;所以协程数目会保持稳定但是代码一运行&#xff0c;协程数量一直增长&#xff0c;发生了协程泄漏 我们可以list…...

健康养生指南

在快节奏的现代生活中&#xff0c;健康养生愈发重要&#xff0c;它是我们享受美好生活的基石。​ 饮食是养生的关键一环。秉持均衡原则&#xff0c;每日保证谷类、蔬果、优质蛋白等各类食物合理摄入。多吃富含膳食纤维的粗粮&#xff0c;像燕麦、糙米&#xff0c;可促进肠道蠕…...

实验二 两个多位十进制数相加实验

一、实验目的 1&#xff0e;掌握汇编子程序的编写方法。 2&#xff0e;掌握循环程序的设计方法。 二、实验内容 将键盘输入的两个5位十进制数相加&#xff0c;在屏幕上显示相加的结果。 三、实验要求 1&#xff0e;显示格式&#xff1a;被加数加数相加的结…...

多模态大模型MLLM基础训练范式 Pre-train + Instruction FineTuning

多模态大模型Pre-train 为了在图文嵌入空间中更好地对齐视觉和文本信息。为此&#xff0c;使用图像-文本对&#xff08;image-caption style data&#xff09;&#xff0c;表示为 ( X , Y a ) (\mathbf{X}, Y_a) (X,Ya​)&#xff0c;其中&#xff1a; X \mathbf{X} X&#x…...

2025.4.15六年之约day11

六年之约已经断更好几个月了&#xff0c;当初六年之约是当做日记来写的&#xff0c;然后被同事刷到了&#xff0c;被谈及的时候挺尴尬的&#xff0c;毕竟里面记录的是我的所思所想。在互联网下&#xff0c;是不适合发布日记的&#xff0c;但我又爱记录所思所想所做。 不知道距…...

Rust学习之实现命令行小工具minigrep(二)

Rust学习之实现命令行小工具minigrep&#xff08;二&#xff09; Rust学习之实现命令行小工具minigrep&#xff08;一&#xff09; 前言 继续记录一下Rust 语言学习过程&#xff0c;上次写了一个命令行查找字符串的小项目minigrep。学习完了闭包&#xff08;Closures&#x…...

Access Token 和 Refresh Token 的双令牌机制,维持登陆状态

目录 1. 双令牌机制2. 工作流程3. 客户端实现4. 服务器端实现5. 注意事项拓展&#xff1a;Token在客户端安全存储的几种方式 为了实现客户端在 JWT Token 过期后自动更新 Token&#xff0c;通常会采用 Access Token 和 Refresh Token 的双令牌机制。以下是实现自动更新 Token 的…...

前端 -- uni-app 的 splitChunks 分包详解与实战!

全文目录: 开篇语📝 前言📖 目录🌟 什么是 splitChunks?🛠 splitChunks 的核心原理📂 文件拆分的机制⚙️ 配置选项✨ splitChunks 实战案例1️⃣ 项目初始化2️⃣ 编写页面逻辑3️⃣ 配置 splitChunks4️⃣ 查看效果🧩 splitChunks 的高级用法与优化🔍 优化一…...

【教程】检查RDMA网卡状态和测试带宽 | 附测试脚本

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 检查硬件和驱动状态 测试RDMA通信 报错修复 对于交换机的配置&#xff0c;可以看这篇&#xff1a; 【教程】详解配置多台主机通过交换机实现互…...

OSPF的拓展配置

OSPF的拓展配置 1&#xff0c;ospf的手工认证 1&#xff0c;接口认证 r1: display ospf peer brief &#xff08;查看邻居关系&#xff09; int g 0/0/0 ospf authentication-mode md5 1 cipher 123456 display this r2: ospf authentication-mode md5 1 plain 12345…...

http、https、TLS、证书原理理解,对称加密到非对称加密问题,以及对应的大致流程

http 超文本传输协议 存在问题&#xff1a; 安全性、隐私性、数据完整性 易被中间人&#xff08;黑客之类的&#xff09;对数据进行劫持、篡改、隐私泄露 引出了 https &#xff08;source&#xff09; http 在网络模型中的应用层 Application > transport > inter…...

vscode格式化为什么失效?自动保存和格式化(Prettier - Code formatter,vue-format)

vscode自动格式化保存最终配置 博主找了好多的插件&#xff0c;也跟着教程配置了很多&#xff0c;结果还是没有办法格式化&#xff0c;最终发现了一个隐藏的小齿轮&#xff0c;配置完后就生效了 关键步骤 关键配置 一定要点小齿轮&#xff01;&#xff01;&#xff01; 这个小…...

两类中断控制器处理流程_链式和层级

今天呢&#xff0c;我们来用一种新的视角去看中断子系统&#xff0c;然后仿照人家的方法去写一个虚拟的中断子系统&#xff0c;我们先来讲讲链式和层级&#xff1a; 链式中断控制器(chained)&#xff1a; 上图中&#xff0c;左边的"chained intc"就是链式中断控制器…...

软件测试之接口测试用例设计

1.接口测试用例设计简介 我们对系统的需求分析完成之后&#xff0c;即可设计对应的接口测试用例&#xff0c;然后用接口测试用例进行接口测试。接口测试用例的设计也需要用到黑盒测试方法&#xff0c;其与功能测试用例设计的方法类似&#xff0c;接口测试用例设计中还需要增加…...

猫咪如厕检测与分类识别系统系列【九】视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【上】

前情提要 家里养了三只猫咪&#xff0c;其中一只布偶猫经常出入厕所。但因为平时忙于学业&#xff0c;没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关&#xff0c;频繁如厕可能是泌尿问题&#xff0c;停留过久也可能是便秘或不适。为了更科学地了解牠的如…...

MySQL-运维篇

日志主从复制分库分表读写分离 日志 在任何一种数据库当中都会有各种各样的日志&#xff0c;这些日志记录着数据库运行的各个方面 错误日志 这个命令可以查看文件尾部的50行日志&#x1f446; 这个命令是实时输出&#x1f446; 二进制日志 第三个是索引文件&#xff0c;里面…...

mysql关联查询语句

假设存在以下三张表&#xff1a; orders 表&#xff1a;记录订单信息&#xff0c;包含 order_id&#xff08;订单编号&#xff09;、customer_id&#xff08;客户编号&#xff09;、order_date&#xff08;订单日期&#xff09;等字段。customers 表&#xff1a;记录客户信息&…...

Uniapp权限申请优化方案

获取权限前给用户提示&#xff0c;并在用户拒绝后48小时内不再弹窗请求授权。 优化方案分析 您的代码已经实现了基本的权限申请逻辑&#xff0c;但可以进一步优化以满足应用商店的审核要求。 1. 权限申请前的用户提示优化 当前代码中已经包含了权限申请前的提示功能&#x…...

案例驱动的 IT 团队管理:创新与突破之路:第四章 危机应对:从风险预见到创新破局-4.2 人才流失危机-4.2.3梯队建设的“洋葱模型“

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 梯队建设的"洋葱模型"&#xff1a;破解IT团队人才流失危机的创新实践1. 人才流失危机的现实挑战1.1 行业现状与数据警示1.2 传统应对策略的失效 2. 洋葱模型的理论…...

双目视觉中矩阵等参数说明及矫正

以下是标定文件中各个参数的详细解释&#xff1a; 1. 图像尺寸 (imageSize) 参数值: [1280, 1024]含义: 相机的图像分辨率&#xff0c;宽度为1280像素&#xff0c;高度为1024像素。 2. 相机内参矩阵 (leftCameraMatrix / rightCameraMatrix) 结构: yaml data: [fx, 0, cx, 0,…...

烽火ai场控接入deepseek自动回复话术软件

要将烽火AI场控软件与DeepSeek自动回复话术软件进行对接&#xff0c;实现直播间自动互动功能&#xff0c;需通过API接口或脚本工具完成数据互通。以下是具体操作步骤及注意事项&#xff1a; 确认兼容性与准备工作 软件支持检查 确认烽火AI场控是否开放API接口&#xff08;一般需…...

CSS 美化页面(三)

一、盒模型 盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素 。包含&#xff1a; 外边距&#xff0c;边框&#xff0c;填充&#xff0c;和实际内容 一个盒子由四个区域组成&#xff1a;内容&#xff08;Content&#xff09;、内边距&#xff08;Padding&#xff09;、外…...

面试题之数据库-mysql高阶及业务场景设计

最近开始面试了&#xff0c;410面试了一家公司 针对自己薄弱的面试题库&#xff0c;深入了解下&#xff0c;也应付下面试。在这里先祝愿大家在现有公司好好沉淀&#xff0c;定位好自己的目标&#xff0c;在自己的领域上发光发热&#xff0c;在自己想要的领域上&#xff08;技术…...

STM32F407实现SD卡的读写功能

文章目录 前言一、SDIO简介二、SD卡操作1.读操作2.写数据3.擦除操作4.最终效果5.完整工程 前言 在STM32中存储空间是有限的&#xff0c;对于需要存储大量数据的项目就需要外扩存储空间&#xff0c;一般会选择FLASH、EEPROM或者SD卡。SD是这三种中可达空间最大的&#xff0c;所…...

Vue 3中的setup【与Vue 2的区别】

一、前言 在Vue 3中&#xff0c;setup是组合式API&#xff08;Composition API&#xff09;的核心入口函数。其核心作用是为组件提供灵活的逻辑组织方式&#xff0c;解决复杂组件中逻辑碎片化的问题。 二、核心作用 1.初始化响应式数据 通过ref和reactive等API声明响应式状态…...

基于PySide6的YOLOv8/11目标检测GUI界面——智能安全帽检测系统

&#x1f4d6; 前言 在工业安全领域&#xff0c;智能安全帽检测是保障工人生命安全的重要技术手段。本文将介绍如何利用YOLOv8/YOLOv11目标检测算法与PySide6 GUI框架&#xff0c;开发一套功能完整的智能安全帽检测系统。系统支持&#xff1a; 动态切换检测模型&#xff08;Y…...

AF3 generate_chain_data_cache脚本解读

AlphaFold3 generate_chain_data_cache 脚本在源代码的scripts文件夹下。该脚本从指定目录中批量解析 mmCIF/PDB 文件的工具,并将每个链的基本信息(序列、分辨率、是否属于聚类等)提取并写入 JSON 文件,主要用于后续蛋白质建模、过滤或训练数据准备。 源代码: import ar…...

C/C++不透明指针

今天在ESP32编程中又看到了这个词&#xff0c;这个词出现在cursor回答中。回答如下&#xff1a; struct esp_netif_obj; typedef struct esp_netif_obj esp_netif_t;esp_netif_obj的具体实现细节被隐藏了用户代码只能通过esp_netif_t类型指针来操作网络接口这种封装方式被称为…...