Question

如果我点击一个按钮，它会调用handleClick，这会将按钮的值从0增加1。我已经使handleClick代码在两种不同的场景中工作。我理解第一个，我似乎没有掌握第二个。

我写了这篇文章。它有效。

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

教程展示了这个，它也有效。

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

如果我将代码更改为此代码，也可以。

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

使用第二个代码体做同样的事情但比第一个代码更复杂有什么好处？

我理解我正在返回一个对象文字，这基本上是我写的，而不是在第一个代码体中生成它。但是，当我将参数保持为空并且只在身体中使用{count}时，为什么我将this.state.count作为参数传递？

Answer 1

在React中，this.setState()将更改排队。不能保证马上发生。因此this.state.count的值可能会在setState实际进行更改时发生变化。

在第二个版本中，您将函数传递给this.setState()。当React准备好更改状态时，将调用该函数，并将当前状态作为参数。这可以确保状态正确递增。