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准备好更改状态时,将调用该函数,并将当前状态作为参数.这可以确保状态正确递增.

React文档更详细.