状态更新不是修改，而是“重新指向”

首先必须理解一个核心点：React 的 state 是不可变的。

当你调用：

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

React 并不会去修改原来的 count 值，而是创建一个新的状态值（比如 1），并将内部“状态指针”指向这个新值。这就像这样：

[0] → [1] → [2] → ...
        ↑
当前状态指针指向的值

如果旧值没有被手动保留，JavaScript 引擎的 GC（垃圾回收）机制就会在适当时机将其回收。

状态变更触发渲染，生成新的“UI 快照”

当 setState 被调用后，React 并不会立刻重新渲染组件，而是：

1. 标记该组件为“需要更新”
2. 将新的状态值排入更新队列（这是批处理的基础）
3. 等待 React 调度新的渲染任务（在浏览器空闲时或下一轮事件循环）

然后 React 会重新执行这个函数组件 —— 也就是执行一次“渲染函数”：

function Counter() {
  const [count, setCount] = useState(1);
  return <div>{count}</div>;
}

此时 React 会根据 最新的 state + props 生成新的虚拟 DOM，也就是所谓的“UI 快照”。

它会与旧的虚拟 DOM 进行 diff，然后将差异通过 Fiber 树的提交阶段 应用到真实 DOM，完成页面更新。

渲染过程中的 state 是“快照式”固定的

这是 React 函数组件中一个极其重要的原则：

在一次渲染（即一次函数执行）中，state 是“固定”的，不会因为后续的 setState 而变化。

即使你在一次函数中多次调用：

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

由于 count 是这次渲染中的旧值，两次 setCount(count + 1) 都是以同一个旧值为基础的，因此你不会得到递增两次的结果。

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

function handleClick() {
  setCount(count + 1); // count 是 0
  setCount(count + 1); // count 还是 0
}

最终只会更新为 1 而不是 2。这就是因为在当前渲染周期中，count 是不可变的状态快照。

正确写法应该是基于上一个状态：

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 最终会加到 2

这也是为什么 React 提供了 更新函数版本（即传入函数）的 setState。

为什么 state 不变才能保证一致性？

你可以把 useState 理解成 React 内部维护的一份“状态仓库”。当组件被 React 调用执行渲染函数时，React 会：

• 使用 Fiber 节点中的“当前状态快照”
• 每次执行 useState 时，从这份快照中“顺序读取”当前值
• 生成虚拟 DOM 并提交更新

如果在渲染过程中状态值是动态变化的，那么组件就无法保证“同一份状态值生成同一份 UI”，这会导致极其复杂且难以预测的副作用。

因此，React 的设计原则之一是：

“状态只在下一次渲染时生效，且当前渲染期间不可变”。

从状态变更到 UI 更新的流程

用户调用 setState()
   ↓
React 将新状态排入更新队列
   ↓
调度器安排一次新的渲染
   ↓
函数组件被重新执行（渲染函数）
   ↓
useState 读取的是当前最新值（状态快照）
   ↓
React 根据 state + props 生成新的虚拟 DOM
   ↓
与旧虚拟 DOM 进行 diff
   ↓
生成最小的变更操作并提交到真实 DOM
   ↓
完成 UI 更新

setState的异步调度和批处理

当你调用：

setCount(count + 1);

React 并不是立刻去修改 count，也不会立刻重新渲染组件，而是把这个“更新请求”加入内部的更新队列中，等到当前事件处理完毕后，再批量调度一次渲染。

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

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
}

假设当前 count 是 0，调用这两个 setCount，其实你提交了两个值都是 1，React 最终只会把最后一个 1 用来渲染：

这就是因为：

在一次同步执行（比如点击事件）的过程中，count 是当前渲染的快照值，不会随着 setCount 立即更新，所以你连续两次 setCount(count + 1) 实际上传入的参数是一样的。

你需要使用更新函数版本的 setCount 才能实现真正的“加两次”：

setCount(prev => prev + 1);
setCount(prev => prev + 1);

setCount(prev => prev + 1) → prev = 0 → new = 1
setCount(prev => prev + 1) → prev = 1 → new = 2

最终 count 就是 2。

1. State 是不可变快照
2. setState 是异步批量更新
3. 事件处理期间不会触发同步渲染
4. 更新函数（functional update）可避免闭包陷阱

调用 setCount 不会立即更新 count，而是将更新请求加入队列。直到下一次渲染开始时，React 才会处理这些更新，并使用新值重新渲染组件。连续多次调用时，如不使用函数式更新，会因为闭包快照导致值重复。

同一次渲染中多次调用setXXX

React 的内部在调用 setState 时，判断了你传入的是函数还是值，并分别走了两套逻辑，这正是 “函数式更新（functional update）” 的本质。

setCount(prev => prev + 1); // 传入的是“函数”

React 内部会记录这个“更新函数”，在稍后的更新队列处理阶段，它会把当前的最新 state 作为 prev 传给这个函数，然后计算出新的值。

// 假设当前 state 是 0
setCount(prev => prev + 1); // 计算结果是 1
setCount(prev => prev + 1); // 再用上一次结果 1，计算出 2

React 的 setState 支持两种更新方式：传入值（直接更新）和传入函数（基于上一次状态更新）。React 内部会判断参数类型，函数式更新允许你安全地进行多次累加、避免闭包陷阱，并确保每次都基于最新状态计算。

当你传入的是函数（即 setState(prev => ...)），React 会延迟执行这些函数直到下一次渲染前，并依次用上一次更新的结果作为下一次的 prev，最终得到最新状态值。这种机制让多次调用也能正确累加。

贡献者: 鱼梦江湖, yumengjh

上一页React UI 组件 和 交互

下一页React 状态管理