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

使用第二个代码体做同样的事情但比第一个代码更复杂的优点是什么？

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

Answer 1

在React中，this.setState()排队改变。不能保证马上发生。所以this.state.count的价值可能在setState实际发生变化时发生了变化。

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