差分.bind（）的箭頭函數（）=>使用在陣營

Question

假設我有一個函數generateList()用於更新狀態和將其映射到一個onClick到<li>.

<li className="some-classname"} 
    onClick={this.generateList('product')}> Product </li> 

有倍我遇到這樣的錯誤：

Warning: setState(...): Cannot update during an existing state transition (such as within渲染). Render methods should be a pure function of props...

而這樣的。我挖掘互聯網爲這個答案，像這樣在來到answer：

<li className="some-classname"} 
    onClick={this.generateList.bind(this, 'product')}> Product </li> 

但是我看到一個答案太（在Github上，但似乎無法找到它）是

<li className="some-classname"} 
    onClick={() => this.generateList('product')}> Product </li> 

主要區別是什麼？哪個更合適高效？當將函數映射到onClick或作爲React組件（我主要使用它）的屬性時，我們應該使用這樣的.bind和() =>是什麼原因？

Answer 1

如果你嘗試：

<li className="some-classname"} 
    onClick={this.generateList('product')}> Product </li> 

該函數將執行對每一個渲染 - 它可以產生額外的回報，這就是引發錯誤。我們想要的是定義一個函數，將在onClick被觸發時稍後調用。

第二個是定義方法，.bind將React類this的上下文綁定到該方法。請注意0​​函數返回一個函數的副本 - 所以這不會調用該函數，只是爲要使用的onClick處理程序定義它。

最後一個：

<li className="some-classname"} 
    onClick={() => this.generateList('product')}> Product </li> 

這定義了一個匿名函數，但是，類似於第二實現，不調用它。只有當onClick被解僱時纔會被調用。但是在某些情況下，使用匿名函數會導致性能問題。這個匿名函數將在每個渲染中定義 - 如果你有一個經常重新渲染的組件，它可能會損害你的應用程序的性能。如果您確定該組件不會經常渲染，則爲了方便，匿名函數應該很好。綁定使用時

此外，您可以在組件類的構造函數是這樣聲明它：

constructor(props) { 
    super(props); 
    this.state = { 
     // your state 
    }; 
    this.generateList = this.generateList.bind(this); 
    }