在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)}/> ，以解決性能問題。