React的useState钩子中prev、prevstate、prevState有何区别？

一、三者根本没区别 #

这三个只是函数参数的名字而已，React对这个参数的命名没有任何强制要求——你哪怕叫它oldVal、lastCount都行，它的唯一作用就是接收更新前的状态值。

拿你的计数器例子来说，不管写哪种：

setCount(prev => prev + 1)
setCount(prevstate => prevstate + 1)
setCount(prevState => prevState + 1)

运行效果完全一致，因为React只会把更新前的状态值传给这个参数，和名字无关。

二、为啥会有三种写法？ #

纯粹是社区命名习惯的差异：

• prevState是最主流的写法，符合JS驼峰命名规范，一眼就能看懂是“之前的状态”；
• prev是简写，当上下文很明确（比如简单计数器），懒得打全就用这个；
• prevstate是拼写不规范的写法，可能是手滑没大写S，或者个人习惯，本质和前两者没区别。

三、什么时候必须用这个“前状态”？ #

当你的状态更新依赖上一次的状态值时，一定要用函数式更新（也就是给setState传个接收prevState的函数），不能直接写setCount(count + 1)。

比如快速点击按钮、或者状态更新是异步触发的场景，直接用count可能会因为React的闭包特性拿到旧值，导致更新出错。举个例子：

// 坑点：快速点两次，可能只加1，因为两次拿的都是同一个旧count值
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
}

// 正确：每次都基于上一次的结果更新，两次点击肯定加2
const handleClick = () => {
  setCount(prevState => prevState + 1);
  setCount(prevState => prevState + 1);
}

这时候不管你给参数起啥名，只要用函数式更新，就能确保拿到的是最新的前状态。

总结 #

• 三个名字只是写法不同，功能完全一样；
• 推荐用prevState，规范且可读性强；
• 状态更新依赖旧值时，必须用函数式更新，避开闭包坑。

内容的提问来源于stack exchange，提问作者stevetanus