前言

本文主要給大家介紹了關于React事件綁定的幾種方法對比的相關呢榮，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

React事件綁定

由于類的方法默認不會綁定this，因此在調用的時候如果忘記綁定，this的值將會是undefined。

通常如果不是直接調用，應該為方法綁定this。綁定方式有以下幾種：

1. 在構造函數中使用bind綁定this

class Button extends React.Component {constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log('this is:', this); } render() { return (  <button onClick={this.handleClick}>  Click me  </button> ); }}

2. 在調用的時候使用bind綁定this

class Button extends React.Component { handleClick(){ console.log('this is:', this); } render() { return (  <button onClick={this.handleClick.bind(this)}>  Click me  </button> ); }}

3. 在調用的時候使用箭頭函數綁定this

class Button extends React.Component { handleClick(){ console.log('this is:', this); } render() { return (  <button onClick={()=>this.handleClick()}>  Click me  </button> ); }}

4. 使用屬性初始化器語法綁定this(實驗性)

class Button extends React.Component { handleClick=()=>{ console.log('this is:', this); } render() { return (  <button onClick={this.handleClick}>  Click me  </button> ); }}

比較

方式2和方式3都是在調用的時候再綁定this。

方式1在類構造函數中綁定this，調用的時候不需要再綁定

方式4：利用屬性初始化語法，將方法初始化為箭頭函數，因此在創建函數的時候就綁定了this。

總結

方式1是官方推薦的綁定方式，也是性能最好的方式。方式2和方式3會有性能影響并且當方法作為屬性傳遞給子組件的時候會引起重渲問題。方式4目前屬于實驗性語法，但是是最好的綁定方式，需要結合bable轉譯