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

从 Vue 到 React：深入理解 useState 的异步更新与函数式写法

news 来源：原创 2025/9/6 17:07:26

从 Vue 到 React：深入理解 useState 的异步更新与函数式写法
- 1. Vue 的响应式回顾：每次赋值立即生效
- 2. React 的状态更新是异步且批量的
- - 原因解析
- 3. 函数式更新：唯一的正确写法
- 4. 对比 Vue vs React 状态更新
- 5. React `useState` 的核心源码机制
- - 1️⃣ Hook 数据结构：链式存储的 Hook 节点
  - 2️⃣ 初次渲染：挂载阶段的 useState
  - 3️⃣ 更新过程：将 `action` 推入队列
  - 4️⃣ 更新应用：render 阶段的 `updateState`
  - 5️⃣ 函数式更新为何正确？
  - 6️⃣ 总结一下
延申
- 1. 什么是 Fiber
- - Fiber 在 Hook 中的作用

从 Vue 到 React：深入理解 useState 的异步更新与函数式写法

在从 Vue 转向 React 的过程中，很容易被一个看似简单的问题困扰：

setCount(count + 1);
setCount(count + 1); // 预期 +2，实际只 +1？

为什么我们连续两次调用 setCount(count + 1)，却没有得到我们预期的 +2 效果？而换成函数式写法：

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 结果才是 +2

却又一切正常？

本文将从 Vue 的响应式系统出发，一步步理解 React 中useState 的状态更新机制，并且在文末会附上核心源码解析，帮你更深入地理解。

1. Vue 的响应式回顾：每次赋值立即生效

在 Vue 中，响应式数据是实时变更的：

const count = ref(0);
count.value++;
count.value++; // 最终为 2

Vue 是利用 Proxy 拦截 .value 的修改，每次赋值都会立即生效并触发响应式更新，从开发者来看就是所写即所得。

2. React 的状态更新是异步且批量的

React 的状态更新行为则截然不同。以 useState 为例：

const [count, setCount] = useState(0);

如果我们连续两次执行：

setCount(count + 1);
setCount(count + 1);

会发现页面上 count 只增加了 1

原因解析

React 为了性能优化，在一次事件循环中会合并所有的 setState 操作（批处理 / batching），并且这些更新是异步生效的。也就是说：

多次 setCount(count + 1) 实际上使用的是同一个旧值 count
每次 render 周期中，state 是只读的快照，相当于每次 render 周期会给 count 拍一张照片，照片停格在 1 ，而非 2

结果就是：

const count = 0;
setCount(count + 1); // 相当于 setCount(1)
setCount(count + 1); // 还是 setCount(1)

最终只更新一次。

3. 函数式更新：唯一的正确写法

为了解决这个问题，React 提供了 函数式更新写法：

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 最终为 2

这种写法的优势在于：每次执行都会传入 最新的 state 值，即使处于同一个批处理中，也能逐步叠加。

它的工作方式等价于：

let current = count;
current = current + 1;
current = current + 1;
setCount(current);

4. 对比 Vue vs React 状态更新

特性	Vue	React
响应性实现	Proxy 拦截或 `ref()`	Fiber 链表 + Hook 存储
多次状态修改	同步生效，立即响应	异步合并更新（batch）
闭包问题	很少遇到	高频出现，需小心处理
正确累加方式	`count.value++`	`setCount(prev => prev + 1)`

5. React `useState` 的核心源码机制

让我们再深入一步，了解 useState 背后是如何工作的。

useState 的底层逻辑，本质上是通过构建一个单向链表结构的 Hook 存储系统，结合更新队列与调度策略来驱动状态更新。我们从以下几个维度拆解其机制：

1️⃣ Hook 数据结构：链式存储的 Hook 节点

在 React 函数组件中，每调用一次 useState（或其他 Hook），React 就在当前组件 Fiber 节点上注册一个对应的 Hook 节点，结构大致如下：（关于 Fiber 这个概念，文末会有讲解）

type Hook = {memoizedState: any; // 当前 state 值queue: UpdateQueue | null; // 更新队列（待应用的 state 变更）next: Hook | null; // 指向下一个 Hook（形成链表）
}

每个组件内部维护着一个单向链表的 Hook 列表，通过「调用顺序」来标识唯一性。

⚠️ 注意：不能写条件调用 Hook（如 if (...) useState()），否则链表顺序不一致，状态错位。

2️⃣ 初次渲染：挂载阶段的 useState

在组件初次渲染时，React 调用 mountState 来创建 Hook 节点：

function mountState(initialState) {const hook = mountWorkInProgressHook();hook.memoizedState = typeof initialState === 'function'? initialState(): initialState;hook.queue = {pending: null, // 更新链表为空dispatch: null,lastRenderedReducer: basicStateReducer};const dispatch = (hook.queue.dispatch = (action) => {// 将 action 推入队列const update = {action,next: null};enqueueUpdate(hook.queue, update);scheduleRender(); // 触发调度});return [hook.memoizedState, dispatch];
}

hook.memoizedState：保存当前状态值
hook.queue：保存更新 action 的链表队列
dispatch：即我们使用的 setState

3️⃣ 更新过程：将 `action` 推入队列

当你调用 setState 时，实际发生的是：

dispatch(action);

然后内部调用：

const update = {action, // 可以是函数或值next: null
};enqueueUpdate(queue, update); // 插入环状链表
scheduleRender(); // 触发一次组件更新调度

更新队列为 循环单向链表（circular linked list），便于在 render 阶段完整遍历。

4️⃣ 更新应用：render 阶段的 `updateState`

组件重新渲染时，React 调用 updateState，核心逻辑如下：

function updateState() {const hook = updateWorkInProgressHook();const queue = hook.queue;let newState = hook.memoizedState;let update = queue.pending;if (update !== null) {// 进入环形队列的遍历let first = update.next;let current = first;do {const action = current.action;newState = typeof action === 'function'? action(newState) // 函数式更新（prev => next）: action;current = current.next;} while (current !== first);hook.memoizedState = newState;queue.pending = null; // 清空队列}return [hook.memoizedState, queue.dispatch];
}

💡 关键点：

如果 action 是函数，就使用函数式更新
更新是基于前一次的 state 累加的
最终更新 memoizedState，用于本轮 render

5️⃣ 函数式更新为何正确？

因为 action 是一个函数，且传入的是队列中最新的 newState，每次都基于上一个结果计算：

setCount(prev => prev + 1);
setCount(prev => prev + 1); // prev 已是前一次递增后的值

这就是为什么 函数式写法可以连续叠加更新，而直接写 count + 1 会导致旧值闭包。

6️⃣ 总结一下

[初始化]└─ mountState → 创建 Hook 节点并保存初始值[调用 setState]└─ dispatch(action) → enqueueUpdate() → queue 中插入更新节点[下一次 render]└─ updateState() 遍历队列 → 应用每个更新 → 更新 memoizedState[完成更新]└─ React 触发重渲 → 组件拿到新 state → UI 重新渲染

所以呢总的来说就是：

React 中每次调用 useState 实际是在组件内部构建一个 Hook 链表节点，该节点保存当前的状态值与更新队列。在调用 setState 时，更新被推入队列，在下一轮 render 时遍历这些更新并依次应用。函数式写法 setState(prev => ...) 能够正确地累加，是因为每次都基于最新的状态进行计算，这是解决闭包陷阱的核心。

延申

1. 什么是 Fiber

在上面的介绍中，我们提到了 Fiber。接下来就来讲讲它。

在 Vue 中，组件更新是“同步递归”的，数据变化会同步触发整棵组件树的遍历。而 React 为了支持中断式渲染（interruptible rendering）与任务调度优化，从 React 16 起引入了一个新的内部架构：Fiber。

等等，这里又提到了一个新概念中断式渲染，这又是啥？为什么要中断？怎么中断？
先放一边，后面再讲解。

Fiber 是 React 内部对组件状态和更新过程的抽象，它是一个轻量级的工作单元，构成了组件树的替代表示。可以简单理解为：

Vue 中每个组件有一个对应的 VNode
React 中每个组件有一个对应的 FiberNode
每个 FiberNode 上挂载了组件的状态、更新队列、DOM 引用等所有运行时信息

当状态变更时，React 会基于当前 Fiber 创建一个「工作中的 Fiber（WorkInProgress）」来调度、计算和构建新的 UI，整个过程是可中断的，方便浏览器优先处理用户交互。

Fiber 在 Hook 中的作用

对于 useState 而言，每一个 Hook 都是绑定在当前组件的 FiberNode 上的：

一个组件 = 一个 FiberNode
一个组件中所有 Hook = FiberNode 内部的 Hook 链表

这就构成了 useState 工作机制的运行基础。

从 Vue 到 React：深入理解 useState 的异步更新与函数式写法

目录从 Vue 到 React：深入理解 useState 的异步更新与函数式写法1. Vue 的响应式回顾：每次赋值立即生效2. React 的状态更新是异步且批量的原因解析 3. 函数式更新：唯一的正确写法4. 对比 Vue vs React 状态更新5. React useState 的核心源码…...

编程日记 2025/9/6 17:07:26

如何实现元素随滚动平滑上升

#技术栈Vue3TypeScript# 相比大家没少见过这个的效果： 作为视觉效果是很不错的同时实现也很简单，本质是封装一个Vue指令 1，创建指令文件 src / directives / vSlidenIn.ts import type { Directive } from vueconst vSlideIn: Directive …...

编程日记 2025/9/6 17:01:38

Nginx部署spa单页面的小bug

没部署过，都是给后端干的，自己尝试部署了一个下午终于成功了我遇到的最大的bug是进入后只有首页正常显示其他页面全是404，于是问问问才知道，需要这个 location / { try_files $uri $uri/ /index.html; } 让…...

编程日记 2025/9/6 0:27:45

关于全球化大规模混合云 Kubernetes Prometheus 监控体系标准化及 GitOps 自动化改进方案

背景现状某司概况： PaaS/SaaS 公司，业务面向全球，包括东南亚/南亚/中东/欧洲/非洲/美洲/东亚…生产 k8s 集群数十套，生产非生产 >100 套(多种集群类型，各种公有云/专有云/私有云/数据中心…)疫情以来&#xff…...

编程日记 2025/9/6 17:04:50

力扣DAY51 | 热100 | 岛屿数量

前言中等 √ 做得我元气大伤，超级naive方法，新开辟一个数组存岛屿编号，一个数组存岛屿上的点。题目给你一个由 1（陆地）和 0（水）组成的的二维网格，请你计算网格中岛屿的数量。 …...

编程日记 2025/9/6 17:01:40

1 二叉树的最近公共祖先学习： 代码 class Solution:def lowestCommonAncestor(self, root: TreeNode, p: TreeNode, q: TreeNode) -> TreeNode:if root is None or root is p or root is q:return rootleft self.lowestCommonAncestor(root.left,p,q)right …...

编程日记 2025/9/2 11:47:21

关于 LLB 的问题

This error occurs when you’re trying to run a program or library that was compiled with GLIBC (GNU C Library) version 2.29, but your system has an older version of GLIBC installed. Solutions: 1. Upgrade your system’s GLIBC (Recommended if possible) Fo…...

编程日记 2025/9/6 14:37:20

kafka4.0浅尝辄止

最近工作中接触消息队列比较多，前几周又看到kafka4.0发布，故写一篇博客对消息队列做一个复盘。目录消息队列对比1. Apache Kafka 4.02. RabbitMQ3. RocketMQ4. ActiveMQ5. Apache Pulsar6. NSQ kafka4.0鲜明的新特性Java 版本要求升级API 更新与精简移…...

编程日记 2025/9/6 17:01:39

nmcli创建wpa-psk2 wifi热点

1. 创建新的WiFi连接： sudo nmcli connection add type wifi ifname wlan0 con-name WiFi名称 autoconnect yes ssid WiFi名称 2. 配置接入点模式和IP共享： sudo nmcli connection modify WiFi名称 802-11-wireless.mode ap 802-11-wireless.band …...

编程日记 2025/9/6 17:07:25

分布式日志治理：Log4j2自定义Appender写日志到RocketMQ

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/9/2 17:50:49

【STM32单片机】#8 定时器编码器接口ADC模数转换器

主要参考学习资料： B站江协科技 STM32入门教程-2023版细致讲解中文字幕开发资料下载链接：https://pan.baidu.com/s/1h_UjuQKDX9IpP-U1Effbsw?pwddspb 单片机套装：STM32F103C8T6开发板单片机C6T6核心板实验板最小系统板套件科协实验&…...

编程日记 2025/9/3 11:20:33

dify部署，ollama部署，拉取模型，创建ai聊天应用

dify下载安装 dify1.0.1 windos安装包百度云盘地址通过网盘分享的文件：dify-1.0.1.zip 链接: 百度网盘请输入提取码提取码: 1234 dify安装包 linux安装包百度云盘地址通过网盘分享的文件：dify-1.0.1.tar.gz 链接: 百度网盘请输入提取码提取码…...

编程日记 2025/9/1 21:51:51

213、【图论】有向图的完全联通（Python）

题目描述原题链接：105. 有向图的完全联通代码实现 import collectionsn, k list(map(int, input().split())) adjacency collections.defaultdict(list) for _ in range(k):head, tail list(map(int, input().split()))adjacency[head].append(tail)visited_…...

编程日记 2025/8/17 21:27:36

Node.js中util模块详解

Node.js 中 util 模块全部 API 详解一、类型检查函数 const util require(util);// 1. util.types // 检查对象类型 console.log(util.types.isDate(new Date())); // true console.log(util.types.isRegExp(/abc/)); // true console.log(util.types.isArrayBuffer(new …...

编程日记 2025/8/17 19:49:02

BasicTS：全面基准测试与异质性分析

BasicTS：全面基准测试与异质性分析在当今数字化时代，多元时间序列（Multivariate Time Series, MTS）分析在众多领域发挥着关键作用，从交通管理到能源系统优化，都离不开对MTS的精准预测。然而，当…...

编程日记 2025/8/31 21:43:04

认识python全栈框架reflex：快速打造工具类网站、模型调用web应用

以下是对reflex的简单介绍： 纯Python编写的，高性能、可自定义的 Web 应用开发框架网页开发内置组件生态完整，灵活使用、快速接入、快速部署支持路由页面，可以开发复杂系统、企业级系统，这方面优于gradio、streamlit…...

编程日记 2025/9/2 17:26:15

课题申报的立项依据方位指南：使用DeepSeek提高课题立项的关键

在竞争日益激烈的学术研究和科研项目申报环境中，立项依据作为课题申报书的灵魂部分，往往决定着一项研究能否获得评审专家的青睐和资助。然而，许多研究者尽管学术能力突出，却在立项依据的撰写上显得力不从心，导致优质…...

编程日记 2025/8/30 0:28:35

蓝桥杯电子赛_E2PROM（AT24C02）

目录一前言二 E2PROM的相关讲解 AT24C02的地址 PCF8591的地址三根据提供的iic写代码相关可能会有疑问的地方： 1 三个入口参数，都有什么用？ 2 为什么在写中，要用IIC_SendByte，在读中，要用IIC_R…...

编程日记 2025/8/31 16:27:32

Kubernetes服务注册到consul流程实践

文章目录前言架构图示意一、环境准备二、consul部署1.yaml示例2.consul部署验证三、consulctl工具实现1.核心功能2.注册到consul的标签及元数据3.consulctl工具使用示例四、通过Dockerfile构建consulctl工具镜像五、Kubernetes集成方案六、结果验证1.注册验证2.销毁验证总…...

编程日记 2025/9/4 19:06:17

供应链业务-供应链全局观（三）- 供应链三流的集成

概述供应链的全局观的全两篇文章主要描述了供应链的基础概念和供应链的协作和集成问题。供应链业务-供应链全局观（一）定义了什么是供应链和供应链管理。所谓供应链就是把采购进来的东西，通过自身的生成加工，进行增值服务&am…...

编程日记 2025/9/3 10:54:55

Docker 提示Docker Engine stopped

做AI开发的时候，安装Docker提示Docker Engine stopped，以下是解决步骤： 一般都是成功的，不成功很可能是电脑兼容问题，通过采用4.4.4版本解决的： docker desktop 4.4.4 旧版本下载：在这里找到了4…...

编程日记 2025/9/5 18:41:53

对自己的优缺点评价

在面试中回答优缺点时，需要既体现自我认知的客观性，又能将优缺点与岗位需求结合，避免暴露可能影响工作的硬伤。以下是一个符合Java开发者角色的回答框架，供参考： 回答思路： 优点：选择与岗位直接…...

编程日记 2025/9/4 13:44:56

解决eNSP在24H2版本下AR_40启动失败问题

前言 1.网络学习中缺少不了模拟，自从Windows版本更新24H2以后，eNSP就出现各种问题，最常见的就是AR报错40【启动失败】，之前我也去网站搜了，也问了Microsoft社区，发现他们在底层逻辑上进行了修改(开启了虚拟…...

编程日记 2025/9/6 1:35:20

计算机组成原理-指令系统

1. 指令系统的定义与作用指令系统（Instruction Set Architecture, ISA）是计算机硬件与软件之间的接口规范，定义了CPU能够识别和执行的所有指令的集合，是计算机体系结构的核心组成部分。核心作用： 为程序员提供操作…...

编程日记 2025/9/5 18:07:12

Oracle数据库中 LEVEL start with prior connect by

在Oracle数据库中，处理层次结构数据是一项常见且重要的任务。无论是组织结构、分类目录还是其他具有层级关系的数据，Oracle都提供了强大的工具来简化和优化这些操作。其中，LEVEL伪列结合CONNECT BY和START WITH关键字，成为了处理层…...

编程日记 2025/9/4 1:19:20

HTTP 1.1 比 HTTP1.0 多了什么？（详尽版）

相较于HTTP 1.0，1.1 版本增加了以上特性： 1. 新增了连接管理即 keepalive，允许持久连接。定义： Keepalive允许客户端和服务器在完成一次请求-响应后，保持连接处于打开状态，以便后续请求复用同一连接&am…...

编程日记 2025/9/3 4:51:55

Java学习手册：Java I/O与NIO

Java I/O（Input/Output）和NIO（New Input/Output）是Java语言中用于处理输入输出操作的重要部分。它们提供了丰富的API来处理文件和网络通信。I/O是Java早期版本中引入的，而NIO是在Java 1.4中引入的，旨在提供…...

编程日记 2025/9/2 3:57:55

linux下的目录文件管理和基本文件管理的基本操作

目录 1.目录创建，文件创建和文件编辑的案例 2.文件编辑进阶 --vim 3. 命令的别名 4. 查看文件内容和文件编辑(重定向)的案例 5. 重定向之追加 6. 查看目录和文件编辑的案例 7. 查看目录和文件编辑(覆盖)的案例为了加深对linux命令的熟悉程度，这…...

编程日记 2025/9/5 15:13:51

magnet库Hello,world!

1.c文件 #include<iostream> #include"Control.hpp" class O1:public mag::Control{bool b; public:O1(){b1;}bool decide(){return b&&islifing();}void action(){std::cout<<"Hello,world!\n";b0;destroy();} }; int main(){O1 o1;…...

编程日记 2025/9/1 15:59:27

应急响应靶机-Linux(1)

挑战内容账户密码：defend/defend Root/defend 黑客的IP地址遗留下的三个flag 1、按正常思路来走，先登录一手因已经给出root账户密码，先查看一手执行过的命令，发现一个flag值并且看到他往期编辑了一个文件，咱们顺便进去…...

编程日记 2025/9/4 3:38:20

k8s 部署spring项目+动态启动pod

在 Kubernetes 中部署 Spring Boot 项目并实现动态管理 Pod（自动扩缩容、滚动更新等），需要结合 Docker 镜像构建、Deployment 配置、Service 暴露和 HPA（Horizontal Pod Autoscaler） 等组件。以下是完整操作步骤&…...

编程日记 2025/8/31 12:55:01

【DINO】

detr 简化了检测流水线，消除了许多手工设置的组件单阶段目标检测需要前置的backbone抽取特征 faster_rcnn和yolo都是基于anchor,anchor当作候选框，NMS非极大值抑制重叠的框只保存一个，效率低所以detr来了，transformer，既有encoder又有decoder，套一个transforme…...

编程日记 2025/9/3 7:11:20

Nature重磅：后晶体管时代光子芯片革新AI计算！光子处理器运行《吃豆人》性能比肩电子，能效提升超500倍

随着人工智能（AI）模型规模以及应用范围的不断拓展，性能上限和能耗瓶颈正逐渐显现出来。大语言模型（LLM）、强化学习和卷积神经网络等 AI 模型的复杂性不断增长，正在将传统电子计算推向极限，能源需…...

编程日记 2025/8/17 21:32:35

Excel表格文件分组归并——通过sql

将 Excel 表转换为 SQL 数据库并直接执行 SQL 查询以获得所需的输出。以下是使用 SQL 实现此目的的步骤： 第 1 步：将 Excel 数据导入 MySQL 假设您设置了 MySQL 数据库，则需要先将 Excel 数据导入到表中。您可以使用语句或工具（…...

编程日记 2025/9/2 0:34:09

2.微服务拆分流程

文章目录交易服务1.1.创建项目1.2.引入依赖1.3.创建交易服务启动类1.4.创建并编写配置文件1.5.代码连接池4.2.1.引入依赖4.2.2.开启连接池抽取Feign客户端 1.6.抽取ItemClient接口1.7.抽取CartClient接口改造OrderServiceImpl扫描包 1.8.数据库1.9.配置启动项1.10.测试以拆分…...

编程日记 2025/8/27 6:36:04

vue入门：计算属性computer监听器watch

文章目录计算属性computer定义计算属性在模板中使用计算属性计算属性的使用场景监听器watch基本语法深度监听立即执行监听数组异步操作数据校验副作用处理清理监听器 watch 与 computed 的区别计算属性computer 在 Vue 中，计算属性（computed&#xf…...

编程日记 2025/9/6 12:31:58

Jenkins 发送钉钉消息

这里不介绍 Jenkins 的安装，可以网上找到很多安装教程，重点介绍如何集成钉钉消息。需要提前准备钉钉机器人的 webhook 地址。（网上找下，很多教程） 下面开始配置钉钉机器人，登录 Jenkins，下载 …...

编程日记 2025/9/3 14:54:52

numpy练习

生成一个2行3列随机整数二维数组a使用Numpy方法对（1）中数组a进行整体求积使用Numpy方法对（1）中数组a进行求每列最大值索引定义一个NumPy一维数组 b，元素为 1 到 10 的整数获取（4）数组b中最后五个…...

编程日记 2025/9/5 10:30:40

Ethers.js 开发入门：核心功能、最佳实践与避坑指南

引言 Ethers.js 是当前 Web3 开发领域增长最快、备受开发者青睐的以太坊 JavaScript 库之一。在本篇文章中，我们将介绍 Ethers.js 的核心功能和用法，包括如何连接区块链节点、与钱包交互、读取智能合约数据、发送交易等。同时，我们还将分享使…...

编程日记 2025/9/1 20:51:19

SQL查询语句的书写顺序

一、标准SQL书写顺序（逻辑顺序） 书写顺序是开发者编写SQL时遵循的语法规则，逻辑上更贴近“声明式”需求描述。以下是从前往后的书写顺序： SELECT[DISTINCT] 列名或表达式 FROM表名或子查询 [JOIN ... ON ...] WHERE行级…...

编程日记 2025/9/5 4:19:35

探索加密期权波动率交易的系统化实践——动态对冲工具使用

Trading Volatility – What Are My Options? 在本文中，我们将介绍一些如何交易资产波动性（而非资产价格）的示例。为了帮助理解，我们将使用 Deribit 上提供的几种不同产品，包括但不限于期权。我们将尽可能消除对标的价…...

编程日记 2025/8/27 14:41:25

文件操作和 IO - 3

目录文件内容的读写 —— 数据流 InputStream 概述方法： 说明： FileInputStream 概述 read 方法： OutputStream 概述方法说明 FileOutputStream 概述 write 方法： Reader 字符流 Writer 字符流总结&#xff1a…...

编程日记 2025/9/5 6:16:51

Kubernetes中的Label和Selector核心作用与应用场景

一. Label 和 Selector 的核心概念 Label 和 Selector 是 Kubernetes 中实现灵活资源管理的基石，贯穿部署、服务发现、监控等核心场景。通过合理设计标签，用户可以高效实现自动化运维与精准资源控制。 Label（标签）： K…...

编程日记 2025/9/4 18:24:30

L1-6 大勾股定理

题目大勾股定理是勾股定理的推广：对任何正整数 n 存在 2n1 个连续正整数，满足前 n1 个数的平方和等于后 n 个数的平方和。例如对于 n1 有 3^2 4^2 5^2 ；n2 有 10^2 11^2 12^2 13^2 14^2 等。给定 n，本题就请你找出对应的解。输…...

编程日记 2025/9/4 0:40:29

esp32-idf Linux 环境安装教程

一、提前说明 1. 系统环境 Ubuntu22.04 2. 适配芯片 ESP32S3 3. idf版本 v5.4.1(截止2025年4月13日为最新版本) 二、安装步骤 1. 安装前置依赖 sudo apt-get install git wget flex bison gperf python3 python3-pip python3-venv cmake ninja-build ccache libffi-dev l…...

编程日记 2025/9/3 4:58:11

关于使用 nuitka进行构建python应用的一些配置，以及github action自动构建；

1. 通用配置 # 设置输出目录和文件名output_dir "dist"app_name "CursorAutoFree"# 基础命令行选项base_options ["--follow-imports", # 跟踪导入"--enable-plugintk-inter", # 启用 Tkinter 支持"--include-packagecusto…...

编程日记 2025/9/4 19:59:32

C++开山解惑

. Solution & Code 本题解仅适用于 C 选手。这道题可谓是 C 中最基础的题目之一，先上两份代码： #include <cstdio> using namespace std;int main() {long long a, b;scanf("%lld%lld", &a, &b);printf("%lld"…...

编程日记 2025/9/3 13:48:15

Pytorch深度学习框架60天进阶学习计划 - 第41天：生成对抗网络进阶（二）

Pytorch深度学习框架60天进阶学习计划 - 第41天：生成对抗网络进阶（二） 7. 实现条件WGAN-GP # 训练条件WGAN-GP def train_conditional_wgan_gp():# 用于记录损失d_losses []g_losses []# 用于记录生成样本的多样性（通过类别分…...

编程日记 2025/8/31 20:37:35

路由策略/策略路由之route-policy

思科名称：route-map、match、set Route-policy 是一个非常重要的基础性策略工具。你可以把它想象成一个拥有多个节点（node）的列表（这些 node 按编号大小进行排序）。在每个节点中，可以定义条件语句及执行语…...

编程日记 2025/9/2 7:12:27

《嵌入式系统原理》一些题目

1 ．ARM 的存储格式？默认的存储模式是？ 大端格式和小端格式，默认为小端模式 2 ．当前程序状态寄存器？（英文简写、条件码标志位及控制位的含义） CPSR，N,Z,C,V(P26) 3 &a…...

编程日记 2025/9/4 7:45:28

目录

从 Vue 到 React：深入理解 useState 的异步更新与函数式写法

1. Vue 的响应式回顾：每次赋值立即生效

2. React 的状态更新是异步且批量的

原因解析

3. 函数式更新：唯一的正确写法

4. 对比 Vue vs React 状态更新

5. React useState 的核心源码机制

1️⃣ Hook 数据结构：链式存储的 Hook 节点

2️⃣ 初次渲染：挂载阶段的 useState

3️⃣ 更新过程：将 action 推入队列

4️⃣ 更新应用：render 阶段的 updateState

5️⃣ 函数式更新为何正确？

6️⃣ 总结一下

延申

1. 什么是 Fiber

Fiber 在 Hook 中的作用

相关文章：

5. React `useState` 的核心源码机制

3️⃣ 更新过程：将 `action` 推入队列

4️⃣ 更新应用：render 阶段的 `updateState`