React Hooks中关于setState回调的一些混淆

Question

下面的代码片段之间的根本区别是什么？

function App(){
let[value,setValue] = useState(0);
let textClick=()=>{
setValue(value+1)
console.log(value)
}
return(
<div className="App">
<div onClick={textClick}>Click Me</div>
</div>
);
}

和这个

function App(){
let[value,setValue] = useState(0);
let textClick=()=>{
setValue((i)=>i+1)
console.log(value)
}
return(
<div className="App">
<div onClick={textClick}>Click Me</div>
</div>
);
}

它们是一样的吗？我对(第二个片段(在setState中有另一个回调感到非常困惑，因为setState本身已经是异步的。需要帮助。感谢

Answer 1

您应该查看官方文档，上面写着：(组件和功能方式应该基本相同(

状态更新可能是异步的React可以将多个setState((调用批处理到一个更新中以提高性能。

因为this.ops和this.state可能是异步更新的，所以不应该依赖它们的值来计算下一个状态。

例如，此代码可能无法更新计数器：

// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});

要修复它，请使用第二种形式的setState((，它接受函数而不是对象。该函数将接收以前的状态作为第一个参数，并将更新时的道具作为第二个参数：

// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));

来源：https://reactjs.org/docs/state-and-lifecycle.html