在ES6类方法和非React中使用胖箭头语法与否之间有功能上的区别吗？

Question

这是编写ES6类方法的两个示例：

第一种使用非胖箭头或简明的方法语法-无论正确调用什么：

class Test extends Component {
  handleClick() {
    return 'clicked'
  }
}

第二种使用胖箭头语法：

class Test2 extends Component {
  handleClick = () => {
    return 'clicked'
  }
}

我是否应该始终喜欢使用粗箭头语法编写？

我注意到的一件事是您可以使用隐式返回，这可以缩短代码。

在大多数示例中，我看到人们在React中编写constructor()和render()方法，但它们并未使用胖箭头语法，但所有其他类方法都使用了它们。

为什么是这样？

我猜答案与this关键字有关，因为它是类的固有属性，并且是胖箭头的上下文保留性质，但是这与类方法上的React和胖箭头语法有什么关系？ 我能想到的唯一情况是，在某些情况下，您可以避免在构造函数中进行绑定，具体取决于以后如何调用类方法。

我希望您能提供科学的答案或区分重要的案例清单。

Answer 1

考虑下面的渲染功能

render() {
    return <div onClick={this.handleClick} />
}

如果将handleClick定义为箭头函数，则在触发click事件时将执行该函数。 否则，它将与render同时运行。

我是否应该始终喜欢使用粗箭头语法编写？

这取决于需要/从何处调用函数。 对于事件处理程序，箭头功能是方便，因为你说出组件的this是访问，你还需要在函数传递，而不是它的输出。

如果您不需要访问组件的this或通过函数，则不需要箭头功能。

Answer 2

粗箭头功能与上下文无关。 这意味着通常会将功能置于上下文之外的位置将停留在适当的上下文中。 在React中最常见的（可能是？）用例是事件处理程序。

这些在功能上都是等效的。 所有普通的地方：

// 1
handleClick() {
  this.setState({clicked: true})
}

<button onClick={this.handleClick.bind(this)}/>

//2
constructor() {
  super()
  this.handleClick = this.handleClick.bind(this)
}
handleClick() {
  this.setState({clicked: true})
}

<button onClick={this.handleClick}/>

//3
handleClick() {
  this.setState({clicked: true})
}

<button onClick={() => this.handleClick()}/>

//4
handleClick = () => {
  this.setState({clicked: true})
}

<button onClick={this.handleClick}/>

归结为偏好。 您唯一可以“挂钩”的是<button onClick={this.handleClick.bind(this)}/> ，以解决性能问题。