Was passiert mit der Bindung von React?

Question

Ich versuche, die Ursache für ein seltsames Verhalten in der Bindung von this in einer React-Komponente zu finden.

Ich bin es gewohnt, Komponenten zu entwickeln und ihre Methoden im Klassenkörper zu platzieren und sie an die Komponente this innerhalb der constructor zu binden. Vor kurzem entschied ich jedoch, dass ich Dinge aufräumen und Bedenken lösen wollte, indem ich einige dieser großen Methoden zu separaten Dateien extrahieren und sie dann in die Komponente importiere.

Zu meiner Bestürzung funktioniert die Bindung this in diesem Fall nicht so einfach. Noch seltsamer, während die Verwendung einer ES6-Pfeil-Funktion nicht richtig zu binden scheint, funktioniert die Verwendung einer grundlegenden ES5-Funktion gut. Ich versuche, die Ursache für dieses Verhalten, um herauszufinden:

Beispiel 1

import React, { Component } from 'react'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.changeName = this.changeName.bind(this); 
    this.state = { 
     name: 'John' 
    }; 
    } 

    changeName() { 
    this.setState({ 
     ...this.state, 
     name: 'Jane' 
    }); 
    } 
... 

Beispiel 2 [wie erwartet funktioniert] [NICHT ARBEITEN - Typeerror: kann Eigenschaft ‚setState‘ undefinierten lesen]

App.js

import React, { Component } from 'react'; 
import changeName from './change-name'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.changeName = changeName.bind(this); 
    this.state = { 
     name: 'John' 
    }; 
    } 
... 

change-name.js

Beispiel [funktioniert wie erwartet - die gleichen App.js wie in Beispiel 2]

change-name.js

function changeName() { 
    this.setState({ 
    ...this.state, 
    name: 'Jane' 
    }); 
}; 

module.exports = changeName; 

Answer 1

Dieses Verhalten ist ein richtiges Pfeil Funktion Verhalten.

Siehe docs:

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

Dieser Teil nicht bindet seine eigene diese ist diejenige, die Sie über fragen. Arrow-Funktion nimmt this aus dem Kontext, umgibt diese Funktionsdeklaration.

Answer 2

Dies ist der neue es6-Funktionsstil. Sie müssen Ihr Methid nicht binden, wenn Sie es6 Pfeilfunktion verwenden.

Entfernen Binding-Anweisung von Konstruktor und es sollte funktionieren.

Answer 3

Ich bevorzuge diese Syntax. Es funktioniert völlig ohne Bindung:

class Something extends React.Component { 
    changeName =() => { 
     // Works 
    } 

    render() { 
     // Add input, div or something with onChange or onClick 
    } 
} 

export default Something