React中setCount回调参数currCount的来源及初始化机制问询

嘿，这个问题我当初刚上手React函数式组件的时候也困惑过！其实核心逻辑很简单：当你给setCount传递一个箭头函数（或者任何函数）时，这个函数的参数currCount是React自动帮你传入的当前最新状态值，完全不需要你手动去初始化它。

下面我给你拆解清楚细节：

1. 为什么要用函数式更新？ #

你代码里的场景就是典型的「新状态依赖旧状态」——加1、减1都需要基于当前的count值计算。如果直接写setCount(count + 1)，在一些特殊场景（比如异步操作、频繁连续更新）里，可能会因为闭包问题拿到旧的count值，导致更新出错。而函数式更新就是React提供的解决方案，确保你总能拿到最新的状态快照。

2. React的内部机制到底做了什么？ #

React会在处理状态更新的流程里，自动维护当前组件状态的最新值。当你调用setCount并传入一个函数时，React会把这个最新的状态值作为参数，注入到你提供的箭头函数里。你给这个参数起的名字currCount只是个自定义别名，换成prevCount、currentValue都完全没问题，核心是React负责帮你传入正确的最新值。

拿你的代码举例：

function incrementCount() {
  setCount(currCount => currCount + 1)
}

当你点击+按钮时，React会先获取当前count的最新值（比如初始是0，第一次点击时就是0），然后把0传给箭头函数的currCount参数，函数返回0+1=1，React就会把状态更新为1。

3. 第一次调用时的初始值从哪来？ #

第一次触发函数式更新的时候，currCount的初始值就是你通过useState(initialCount)设置的初始状态值。比如如果父组件传入的initialCount是5，第一次调用decrementCount时，currCount就是5，函数返回4，状态就会更新为4。

额外补充：对比两种更新方式的差异 #

举个异步场景的例子，你就能更明白函数式更新的必要性：

// 可能出问题的写法：闭包捕获旧值
function delayedIncrement() {
  setTimeout(() => {
    setCount(count + 1)
  }, 1000)
}

// 可靠的写法：总能拿到最新状态
function delayedIncrement() {
  setTimeout(() => {
    setCount(currCount => currCount + 1)
  }, 1000)
}

第一种写法里，setTimeout的回调会捕获定义时的count值，如果在这1秒内count被其他操作更新了，回调里的count还是旧的；而第二种写法里，React会在执行回调时传入最新的count值，所以结果永远是正确的。

内容的提问来源于stack exchange，提问作者w.k