Müssen Sie eine Funktion explizit binden?

Question

Ich habe eine Funktion namens multiplizieren und eine Komponente namens NumberInputField, wenn ich die Funktion der Komponente zu übergeben ich benutze:

<NumberInputField id='1' action={this.multiply} /> 

aber ich habe auch gesehen:

<NumberInputField id='1' action={this.multiply.bind(this)} /> 

sie beide zu funktionieren scheint. Ist da ein Unterschied? Ist eine Möglichkeit akzeptabler?

Answer 1

Wenn Sie bind eine Funktion, werden Sie diese Funktion Kontext der Klasse geben Sie sich gerade in. Wenn zum Beispiel die multiply() Funktion benötigt this.setState() verwenden dann würden Sie brauchen bind so zu verwenden, dass die Funktion hat der passende Kontext.

Es ist jedoch keine gute Idee, bind in Ihrer Rendermethode zu verwenden. Warum? Weil jedes Mal render aufgerufen wird, wird bind erneut auftreten. Stattdessen können Sie die Funktion in Ihrem Konstruktor

binden, z.

constructor() { 
    super(); 
    this.multiply = this.multiply.bind(this); 
} 

noch besser, wenn Sie Babels verwenden verwandeln Klasseneigenschaften Plugin, können Sie Ihre Funktionen schreiben wie so

export default class App extends Component { 

    multiply =() => { 
     //Automatically knows about "this" 
    }; 

} 

Während einige Antworten Sie beachten, dass Sie brauchen es nur, wenn Sie sollte „dieses“ zugreifen in dieser Funktion. Es ist wichtig, dass Sie auch die Best Practices verstehen. Do nicht binden in der Render-Methode.

Answer 2

Bearbeitet:

Es hängt davon ab, was die Funktion macht. Wenn du Zugriff auf State, Requisiten usw. benötigst, dann musst du es binden. Es empfiehlt sich, es als Pfeilfunktion zu erstellen oder im Konstruktor zu binden.

Wenn nicht, dann nein. Am besten wäre es jedoch, diese Funktion in eine Hilfsdatei zu verschieben, damit sie später erneut verwendet werden kann, wenn es sich um eine wiederverwendbare Funktion handelt.