在 React 組件中肖抱，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例灸促，即自動(dòng)綁定 this 為當(dāng)前組件滞磺。 而且 React 還會(huì)對(duì)這種引用進(jìn)行緩存升薯，以達(dá)到 CPU 和內(nèi)存的優(yōu)化。在使用 ES6 classes 或者純 函數(shù)時(shí)击困，這種自動(dòng)綁定就不復(fù)存在了涎劈，我們需要手動(dòng)實(shí)現(xiàn) this 的綁定。
1.bind方法進(jìn)行綁定沛励，這個(gè)方法可以幫助我們綁定事件處理器內(nèi)的 this 责语，并可以向事件處理器中傳 遞參數(shù)，如下圖清晰明了：
2.箭頭函數(shù)進(jìn)行綁定目派，箭頭函數(shù)不僅是函數(shù)的“語(yǔ)法糖”坤候，它還自動(dòng)綁定了定義此函數(shù)作用域的 this， 因此我們不需要再對(duì)它使用 bind 方法如下圖：
也可以是下面這種：
class App extends Component {
?handleClick(e) { console.log(e); }?
render() {return <button onClick={() => this.handleClick()}>Test</button>}
}
3.構(gòu)造器內(nèi)聲明企蹭。在組件的構(gòu)造器內(nèi)完成了 this 的綁定白筹，這種綁定方式的好處在于僅需要 進(jìn)行一次綁定智末，而不需要每次調(diào)用事件監(jiān)聽器時(shí)去執(zhí)行綁定操作
以上就是三種事件綁定的方式，我個(gè)人覺得第三種比較好徒河，只需要進(jìn)行一次綁定操作優(yōu)化性能系馆。
最后附上渲染報(bào)錯(cuò)的例子如下：
Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state
出現(xiàn)如上的提示說(shuō)明事件并沒有綁定到this實(shí)例上，按上述三種方式解決即可Ｍ缯铡Ｓ赡ⅰ！
? ? ? ? ? ? ? ? ? ? ? ? 本人才疏學(xué)淺代兵，有不對(duì)的地方請(qǐng)多多指教尼酿，共同進(jìn)步！Ｖ灿啊裳擎！
