React useState Hook 工作原理及setCount调用方式疑问解答

1. 为什么 setCount(+1) 无法实现自增？ #

+1 在这里就是纯数值 1，每次调用 setCount(+1) 本质是把 count 的状态直接设置为 1，而不是基于当前 count 的值做累加。对比 setCount(count + 1)，后者是拿当前状态的最新值 count 加1得到新值，再传给更新函数，这样才能实现每次点击都累加1的效果。

2. 为什么调用 setCount 时需要用到变量名（比如 count）？ #

setCount 是和 count 这个状态绑定的更新函数，它的作用是接收新的状态值或者计算新值的回调函数，然后把对应的 count 状态替换成这个新值。它本身不知道当前 count 的值是多少，所以你需要主动提供基于当前状态的新值逻辑：

• 直接用 count + 1 是显式拿当前状态计算新值；
• 也可以用函数式更新 setCount(prev => prev + 1)，这里的 prev 就是React帮你传入的当前状态值，这种写法不需要写 count 变量名，但本质还是依赖当前状态来生成新值。

不是必须写 count 这个变量名，而是必须提供“基于当前状态生成新值”的逻辑，变量名只是你获取当前状态的方式。

3. 为什么不能用 setCount 更新普通变量（比如 myVar）？ #

const myVar = 0 是普通的JavaScript常量，不是React的状态变量。setCount 从诞生起就只负责更新它绑定的那个状态（也就是调用 useState(0) 返回的第一个变量 count），和 myVar 没有任何关联。

调用 setCount(myVar + 1) 只会把 count 的状态设置为 1（因为 myVar+1 等于1），但 myVar 本身不会有任何变化——React不会跟踪普通变量的变化，也不会因为普通变量改变而重新渲染组件。这根本不是“更新myVar”，只是把 count 设成了 myVar+1 的结果而已。

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