在React中使用bind（this）

Question

我可以使用這些選項中的任何一個嗎？他們都以同樣的方式工作嗎？我正在使用ES6。

onChange={this.makeChange.bind(this)} 

onChange={() => this.makeChange()} 

constructor(props) { 
    super(props); 
    this.makeChange = this.makeChange.bind(this); 
} 

Answer 1

是的，你可以使用全部三種。儘管它們表現相同，但它們具有不同的性能影響。

在constructor中綁定函數在性能方面是最好的選擇，因爲該函數僅在實例化組件時創建一次。而對於其他解決方案，只要組件（重新）呈現，就會創建一個新函數。這會導致子組件也重新渲染，因爲它們的道具已經改變。

您可以在官方瞭解更多關於這個陣營文檔：https://facebook.github.io/react/docs/handling-events.html

---

就個人而言，我更喜歡使用類屬性以下語法（這是唯一可用的，如果你正在使用的打字稿或Babel plugin）：

class LoggingButton extends React.Component { 
    // This syntax ensures `this` is bound within handleClick. 
    // Warning: this is *experimental* syntax. 
    handleClick =() => { 
    console.log('this is:', this); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     Click me 
     </button> 
    ); 
    } 
} 

該選項也在React文檔中解釋。