nicht in der Lage zu verstehen, die Verwendung/Notwendigkeit einer Codezeile in ReactJS

Question

Ich lerne ReactJS und ich habe viele verfügbare Antworten gesehen, aber ich bin nicht in der Lage zu verstehen, warum this.setStateHandler = this.setStateHandler.bind(this); in dem unten angegebenen Code verwendet wird? Warum können wir nicht einfach die setStateHandler Funktion auf Knopf klicken ohne diesen Code der Linie, die im Konstruktor geschrieben wird (wie wir normalerweise in anderen Programmiersprachen tun)? Bitte erläutern Sie in einfacher Terminologie.

-Code

import React from 'react'; 

class App extends React.Component { 
    constructor() { 
     super(); 

     this.state = { 
     data: [] 
     } 

     this.setStateHandler = this.setStateHandler.bind(this); 
    }; 

    setStateHandler() { 
     var item = "setState..." 
     var myArray = this.state.data; 
     myArray.push(item) 
     this.setState({data: myArray}) 
    }; 

    render() { 
     return (
     <div> 
      <button onClick = {this.setStateHandler}>SET STATE</button> 
      <h4>State Array: {this.state.data}</h4> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

Kontext aka this Bedürfnisse eingestellt werden zu Ihrer Instanz verweisen, wenn Sie

standardmäßig alle Methoden oder Eigenschaften verwenden müssen, eine normale DOM Event-Handler-Funktion würde this als das Element verwenden, das das Ereignis auslöst. in + Strict-Modus reagieren, können thisundefined sein, daher Ausnahme 'setState' of undefined is not a function, es sei denn, Sie bind auf die Instanz es oder sie in einer Pfeilfunktion (halten Kontext) entweder

so nennen tun, was Sie tun oder:

// arrow keeps context 
onClick={e => this.handleClick(e)} 
// experimental/proposal 
onClick={::this.handleClick} 

// needs class properties transform, binds to instance via arrow 
handleClick = event => { 
    // stuff on this, then just onClick={this.handleClick} 
} 

dies die häufigste Frage zu diesem Tag sein muss ...

bedenken, dass viele der Methoden im Fluge eine neue Funktion in jedem render(){}, beinhalten schaffen, die bei einer Leistung Kosten kommt - so Ihre Methode ist bevorzugt oder die Klasseneigenschaften transformieren (wh Ich mache das gleiche)

siehe How can I tell when this.setState exists in ES6? usw.