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

Question

我已经开始学习ReactJS，并且意识到可以通过两种方式更改状态。两者都正常工作，没有任何错误或警告。

  

主要区别是什么？有什么理由或需要我使用第二个版本吗？

考虑我想在每次点击时修改以下状态

this.state = { count: 0 } 

第一版

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

第二版

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

Answer 1

  

如果要基于前一个状态设置下一个状态值   值，然后将function（第二个版本）作为第一个   推荐是this.setState而不是object的参数   解决方案。

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

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

在第一个版本中，count的值很可能不正确，尤其是在应用程序变大之后。

Answer 2

如果您依赖先前的状态（例如，您需要先前的计数器值），则首选第二种方法。它保证prvState保持当前状态。如果您有两个setState在同一个渲染循环中修改状态，这一点很重要（请记住，React可以将多个setState调用一起批处理），例如

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})

保证它按预期增加了两倍（独立于setState由React处理的顺序）