Welche Methode des Bindungskontexts in React (ES6-Klassen) ist besser

Es gibt keine automatische Bindung in React ES6-Klassen. So haben Entwickler zwei Optionen, wie er kann, um den Kontext zu binden:Welche Methode des Bindungskontexts in React (ES6-Klassen) ist besser

1) Im Konstruktor

export class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.myFunction = this.myFunction.bind(this); 
    } 
    myFunction() { 
    // do something 
    } 
    render() { 
    return (
     <div onClick={this.myFunction}></div> 
    ); 
    } 
}

2) Inline-Methode

export class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    myFunction() { 
    // do something 
    } 
    render() { 
    return (
     <div onClick={this.myFunction.bind(this)}></div> 
    ); 
    } 
}

Welche Methode ist mehr produktiv zu arbeiten?

Quelle

2016-07-08 yevgeniy

Es ist eher eine Stilvorliebe, verwenden die meisten Menschen die erste Methode, da es den Code ein bisschen aufräumt –

Vereinbarte mit @TylerIguchi ... Ich bevorzuge das erste für ein saubereres Aussehen, aber keines ist mehr "produktiv" – erichardson30

Wenn Sie haben mehrere Listener, an die Sie eine Funktion binden, indem Sie '.bind (this)' direkt auf dem Element verwenden, kann mühsam und unübersichtlich werden. An diesem Punkt ist es besser, in der Konstruktorfunktion zu binden. Ich denke, es ist eine bessere Übung, im Konstruktor zu binden und nach diesem Standard zu gehen. –

Ich empfehle Pfeilfunktion.

bind() ist nicht mehr notwendig.

Quelle

2016-07-08 17:20:14

Das Problem dabei ist, dass eine neue Funktion jedes Mal erstellt wird, wenn die Komponente neu gerendert wird. Es wäre besser, im Konstruktor zu binden. –

Sie haben Recht, ist dieses Problem so ernst, dass wir es nicht ignorieren können? Auf jeden Fall sollten wir, wie Sie sagen, mit der Leistung vorsichtig sein. –

Für Handlerfunktionen, wenn sie als normale Funktionen aufgerufen werden, bezieht sich dies auf globales Objekt. Dies geschieht bei Verwendung von ECMAScript 6-Klassen anstelle von React.createClass(), die unter der Haube automatisch gebunden werden. Zwei Ansätze können den Effekt der Bindung wie erwartet implementieren. Verwenden Sie zuerst die Syntax wie unten, um die Handler-Funktion explizit zu binden. Der andere Ansatz besteht darin, auf diese Weise die Handler-Eigenschaft der Komponente zu schreiben, ohne etwas zu binden.

<MyComponent onChange={() => this.handleChange()}><MyComponent />

In einer solchen Weise wird der Handler nur aufgerufen werden, wenn entsprechende Ereignis und zu diesem Zeitpunkt ausgelöst wird, welche die this bezieht sich auf die Komponenteninstanz, ist das, was wir es verweisen erwarten.

Beide Ansätze können funktionieren, entscheiden, welche zu verwenden ist Ihr Anruf.

Quelle

2017-03-16 03:29:13

Welche Methode des Bindungskontexts in React (ES6-Klassen) ist besser

Antwort

Verwandte Themen