是否对 ES6 class 方法和 React 使用粗箭头语法之间存在任何功能差异？

Question

这里有两个写ES6class方法的例子：

第一个使用非粗箭头，或简洁的方法语法——不管它的正确名称是什么：

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

第二个使用粗箭头语法：

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

我应该总是更喜欢使用粗箭头语法来编写吗？

我注意到的一件事是您可以使用隐式 return 来缩短代码。

在我看到的大多数例子中，人们在 React 中编写 constructor() 和 render() 方法，他们 而不是 对那些使用粗箭头语法，但它们对所有其他 class 方法都使用。

这是为什么？

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

我希望能提供一个科学的答案或一份区分很重要的案例列表。

Answer 1

考虑下面的渲染函数

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

当handleClick定义为箭头函数时，该函数在触发点击事件时执行。否则它是运行同时 render.

Should I always prefer to write using fat arrow syntax?

这取决于 how/from 您需要在哪里调用您的函数。对于事件处理程序，箭头函数很方便，因为当您声明组件的 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}/>

归结为偏好。由于性能问题，您唯一可以 'pegged' 的是 <button onClick={this.handleClick.bind(this)}/>。

是否对 ES6 class 方法和 React 使用粗箭头语法之间存在任何功能差异？

Are there any functional differences between using fat arrow syntax or not for ES6 class methods and React?

javascript

reactjs

ecmascript-next