無法理解ReactJS中一行代碼的使用/需要

Question

我正在學習ReactJS，並且我看到了很多可用的答案，但我無法理解爲什麼this.setStateHandler = this.setStateHandler.bind(this);正被用於下面給出的代碼中？爲什麼我們不能簡單地在按鈕點擊時調用setStateHandler函數，而沒有在構造函數中編寫這行代碼（正如我們通常在其他編程語言中那樣）？請用簡單的術語解釋。

代碼

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

方面又名this需要進行設置，如果你需要使用任何方法或屬性

在默認情況下，一個正常的DOM事件處理函數指向您的實例將使用this作爲觸發事件的元素。在反應+嚴格模式，this可以undefined，因此例外'setState' of undefined is not a function，除非你bind它的實例或稱之爲箭頭功能（保持上下文）

所以無論做什麼你做什麼或：

// 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} 
} 

這必須是在這個標籤中最常見的問題...

記住，許多方法涉及建立在每個render(){}飛，這是有性能成本一個新的功能 - 讓你的方法是首選的或類屬性轉換（wh ich也一樣）

請參閱How can I tell when this.setState exists in ES6?等