ReactJS直接设置状态和通过方法参数的区别

如果要基于前一状态设置下一状态值 值,然后传入 function (第二版)作为第一版 参数 this.setState 而不是 object 是 推荐 解决方案。

handleClick = () => {
    this.setState(prvState => {
        return {
            count: prvState+1
        }
    })
}

原因是 this.state 可能是异步更新的,这就是为什么不应该依赖它们的值来计算下一个状态的原因。

在第一个版本中,很可能 count 不正确,尤其是当应用程序变大时。

如果您依赖于先前的状态(就像在您的案例中需要先前的计数器值),则首选第二种方法。它保证 prvState 保持当前状态。如果你有两个,这很重要 setState 修改同一渲染循环中的状态(请记住,react可能批处理多个 设置状态 一起打电话),例如

this.setState({count: this.state.count+1})
this.setState({count: this.state.count+1})

有个问题 count 只递增一次。同时

this.setState((prevState) => {count: prevState.count+1})
this.setState((prevState) => {count: prevState.count+1})

保证按预期增加两倍(与订单无关 设置状态 由react处理)