javascript - React 中这两个 ES6 箭头函数有什么区别？

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

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

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

Answer 1

在 React 中，this.setState() 对更改进行排队。不能保证会立即发生。因此 this.state.count 的值可能在 setState 实际进行更改时已经更改。

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

The React documentation进入更多细节。