React.useState应传入值还是函数？加减场景写法疑问

我并非遇到功能问题，而是希望加深对React.useState()的理解。我使用React.useState(0)实现了加减计数并在浏览器中展示的功能，程序可正常运行，但不确定当前写法是否规范。

任务要求：使用React.useState(0)实现加减计数并在浏览器中展示变化。

我的代码如下：

function App(){
    const [myValue , setmyValue] = React.useState(0);
    function addValue(value){
        value = value + 1;
        return value;
    }
    function subValue(value){
        value = value - 1;
        return value;
    }
    function handleAdd(){
        //setmyValue( myValue + 1);
         setmyValue(addValue(myValue))
    }
    function handleSub(){
        setmyValue(myValue - 1);
    }
    return (
        <div>
            <button onClick={handleAdd}>+</button>
            <p>{myValue}</p>
            <button onClick={handleSub}>-</button>
        </div>
    )
}
ReactDOM.render(<App/>, document.getElementById("part1"));

想请教：直接将myValue传入setmyValue函数，还是传入另一个函数的写法才是正确的？

两种写法都能正常工作，但适用场景不同，核心区别在于是否依赖「最新的状态值」来计算新状态：

1. 直接传值的写法（如setmyValue(myValue - 1)）
   这种方式是直接用当前作用域中的myValue计算出新值，再传给状态更新函数。
   但存在局限性：如果更新逻辑是异步执行（比如在setTimeout中调用更新），或者同一事件中多次触发状态更新，此时作用域里的myValue可能不是最新的，会导致更新结果不符合预期。

2. 函数式更新写法（注意不是你代码里的addValue(myValue)）
   你当前代码里的setmyValue(addValue(myValue))本质还是「直接传值」——因为你先把myValue传入addValue算出结果，再把结果传给setmyValue。真正的函数式更新是把回调函数传给setmyValue，React会自动将最新的状态值作为参数传入这个回调：

   function handleAdd(){
     setmyValue(prevValue => prevValue + 1);
   }
   function handleSub(){
     setmyValue(prevValue => prevValue - 1);
   }
   

   这种写法的优势在于，无论更新逻辑是否异步，React都会提供最新的状态值，避免因闭包导致的状态过期问题。

回到你的代码，当前两种写法都能正常运行，但如果后续给加减逻辑添加异步操作（比如点击按钮延迟1秒再更新），直接传值的写法就会出错，而函数式更新则不会。另外，你代码里的addValue和subValue函数可以直接用函数式更新的回调替代，让代码更简洁。

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