Verwendung von Bind (this) in React

Question

Kann ich eine dieser Optionen verwenden? Arbeiten sie alle gleich? Ich benutze ES6.

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

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

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

Answer 1

Ja, Sie können alle drei verwenden. Obwohl sie sich gleich verhalten, haben sie unterschiedliche Auswirkungen auf die Leistung.

Das Binden der Funktion in constructor ist die leistungsfähigste Option, da die Funktion nur einmal erstellt wird, wenn die Komponente instanziiert wird. Während bei den anderen Lösungen eine neue Funktion erstellt wird, wann immer die Komponente rendert. Dies führt dazu, dass untergeordnete Komponenten ebenfalls neu gerendert werden, da ihre Requisiten sich geändert haben.

Sie können mehr über diese in der offiziellen lesen docs Reagieren: https://facebook.github.io/react/docs/handling-events.html

---

Ich persönlich ziehe die folgende Syntax Klasseneigenschaften verwenden (dies ist nur verfügbar, wenn Sie mit Schreibmaschine oder ein 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> 
    ); 
    } 
} 

Diese Option wird auch in der React-Dokumentation erläutert.