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

はい、3つすべて使用できます。同じように動作しても、パフォーマンスにはさまざまな影響があります。

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ドキュメントでも説明されています。