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。

• 優點：寫法比較簡單，當元件中沒有state的時候就不需要新增類建構函式來繫結this
• 缺點：每一次呼叫的時候都會生成一個新的方法例項，因此對效能有影響，並且當這個函式作為屬性值傳入低階元件的時候，這些元件可能會進行額外的重新渲染，因為每一次都是新的方法例項作為的新的屬性傳遞。

方式1在類建構函式中繫結this，呼叫的時候不需要再繫結

• 優點：只會生成一個方法例項，並且繫結一次之後如果多次用到這個方法也不需要再繫結。
• 缺點：即使不用到state，也需要新增類建構函式來繫結this，程式碼量多一點。。。

方式4：利用屬性初始化語法，將方法初始化為箭頭函式，因此在建立函式的時候就綁定了this。
優點：建立方法就繫結this，不需要在類建構函式中繫結，呼叫的時候不需要再作繫結。結合了方式1、方式2、方式3的優點
缺點：目前仍然是實驗性語法，需要用babel轉譯

總結

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

來源：https://segmentfault.com/a/1190000011317515