Question

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

第一个使用非胖箭头或简洁的方法语法 - 无论它被正确调用：

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

第二种使用胖箭头语法：

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

我是否应该总是喜欢使用胖箭头语法编写？

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

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

这是为什么？

我猜测答案将与this关键字有关，因为它对于类和胖箭头的上下文保留特性是相当固有的，但这与React和fat arrow语法有何关联类方法？我能想到的唯一情况是，你可能能够避免在某些情况下在构造函数中绑定，这取决于稍后如何调用类方法。

我希望得到一个科学答案或一个区别很重要的案例清单。

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

归结为偏好。唯一一个你可以被钉住的人＃39; for <button onClick={this.handleClick.bind(this)}/>，表示性能问题。

使用胖箭头语法与ES6类方法和React之间是否有任何功能差异？

2 个答案: