react事件綁定的三種常見方式以及解決Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state問題思路

在 React 組件中，每個方法的上下文都會指向該組件的實例，即自動綁定 this 為當前組件。 而且 React 還會對這種引用進行緩存，以達到 CPU 和內存的優化。在使用 ES6 classes 或者純 函數時，這種自動綁定就不復存在了，我們需要手動實現 this 的綁定。

1.bind方法進行綁定，這個方法可以幫助我們綁定事件處理器內的 this ，並可以向事件處理器中傳 遞參數，如下圖清晰明了：

 

bind方法綁定

2.箭頭函數進行綁定，箭頭函數不僅是函數的“語法糖”，它還自動綁定了定義此函數作用域的 this， 因此我們不需要再對它使用 bind 方法如下圖：

 

箭頭函數1

也可以是下面這種：

class App extends Component {

 handleClick(e) { console.log(e); } 

render() {return <button onClick={() => this.handleClick()}>Test</button>}

}

3.構造器內聲明。在組件的構造器內完成了 this 的綁定，這種綁定方式的好處在於僅需要 進行一次綁定，而不需要每次調用事件監聽器時去執行綁定操作

 

構造器內聲明

以上就是三種事件綁定的方式，我個人覺得第三種比較好，只需要進行一次綁定操作優化性能。

最后附上一張渲染報錯的例子如下：

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

出現如上的提示說明事件並沒有綁定到this實例上，按上述三種方式解決即可！！！

                        本人才疏學淺，有不對的地方請多多指教，共同進步！！！