React useState两种计数写法行为差异原因咨询

核心差异在于JavaScript的运算符行为，以及React useState的状态更新逻辑：

问题代码对比 #

无法正常工作的代码 #

import { useState } from "react";
function App() {
  let [Counter, setCounter] = useState(0);
  const increaseCounter = () => {
    console.log(Counter, Math.random());
    setCounter(Counter++); // 问题所在
  };
  return (
    <>
      <h1>{Counter}</h1>
      <button onClick={increaseCounter}>++</button>
    </>
  );
}

export default App;

正常工作的代码 #

import { useState } from "react";
function App() {
  let [Counter, setCounter] = useState(0);
  const increaseCounter = () => {
    console.log(Counter, Math.random());
    setCounter(Counter+1); // 正确的更新方式
  };
  return (
    <>
      <h1>{Counter}</h1>
      <button onClick={increaseCounter}>++</button>
    </>
  );
}

原因拆解 #

1. Counter++的行为：后置自增运算符
   Counter++属于后置自增，执行逻辑是先返回变量当前的原始值，再对变量进行自增操作。也就是说，调用setCounter(Counter++)时，传给setCounter的是Counter的当前旧值（比如第一次点击时是0），之后才会把当前作用域里的Counter变量加1——但这个加1的是组件函数里的局部变量，根本不是React useState维护的状态，React只会认通过setCounter传递的新值，所以状态不会更新。

2. Counter+1的行为：直接计算新值
   Counter+1是直接基于当前状态值计算出全新的数值（比如0+1=1），把这个新值传给setCounter后，React会识别到状态变化，触发组件重新渲染，更新显示的Counter值。

额外建议：函数式更新更可靠 #

如果你的状态更新依赖于之前的状态值，更推荐使用函数式更新的写法：

setCounter(prevCounter => prevCounter + 1);

这种方式可以避免闭包捕获旧状态的问题，比如在连续点击或者异步操作中，能确保每次都基于最新的状态值进行更新。

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