React事件繫結幾種方法測試

wait.發表於2018-10-26
React事件

前提 es6寫法的類方法預設沒有繫結this，不手動繫結this值為undefined。

因此討論以下幾種繫結方式。

一、建構函式constructor中用bind繫結

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      t: 't'
    }
    // this.bind1 = this.bind1.bind(this) 無參寫法
    this.bind1 = this.bind1.bind(this, this.state.t)
  }

    // 無參寫法 
    // bind1 () {
    //   console.log('bind1', this)
    // }

  bind1 (t, event) {
    console.log('bind1', this, t, event)
  }

  render () {//面相1-3年經驗前端開發人員
    return (//面相1-3年經驗前端開發人員
      <div>//幫助突破技術瓶頸，提升思維能力
        <button onClick={this.bind1}>列印1</button>

      </div>
    )
  }
}
複製程式碼

二、在呼叫的時候使用bind繫結this

 bind2 (t, event) {
    console.log('bind2', this, t, event)
  }

  render () {
    return (
      <div>
        <button onClick={this.bind2.bind(this, this.state.t)}>列印2</button>
      </div>
    )
  }
// 無參寫法同第一種
複製程式碼

三、在呼叫的時候使用箭頭函式繫結this

  bind3 (t, event) {
    console.log('bind3', this, t, event)
  }

  render () {
    return (
      <div>
        // <button onClick={() => this.bind3()}>列印3</button> 無參寫法
        <button onClick={(event) => this.bind3(this.state.t, event)}>列印3</button>
      </div>
    )
  }
四、使用屬性初始化器語法繫結this
  bind4 = () =>{
    console.log('bind4', this)
  }

  render () {
    return (
      <div>
        <button onClick={this.bind4}>列印4</button>
        // 帶參需要使用第三種方法包一層箭頭函式
      </div>
    )
  }
複製程式碼

附加::方法（不能帶參，stage 0草案中提供了一個便捷的方案——雙冒號語法）

  bind5(){
    console.log('bind5', this)
  }

 render() {//前端全棧交流學習圈：866109386
   return (//面相1-3年經驗前端開發人員
    <div>//幫助突破技術瓶頸，提升思維能力
       <button onClick={::this.bind5}></button>
    </div>
  )
 }
複製程式碼

方法一優缺點 優點：

只會生成一個方法例項； 並且繫結一次之後如果多次用到這個方法也不需要再繫結。

缺點：

即使不用到state，也需要新增類建構函式來繫結this，程式碼量多； 新增引數要在建構函式中bind時指定，不在render中。

方法二、三優缺點 優點：

寫法比較簡單，當元件中沒有state的時候就不需要新增類建構函式來繫結this。

缺點：

每一次呼叫的時候都會生成一個新的方法例項，因此對效能有影響； 當這個函式作為屬性值傳入低階元件的時候，這些元件可能會進行額外的重新渲染，因為每一次都是新的方法例項作為的新的屬性傳遞。

方法四優缺點 優點：

建立方法就繫結this，不需要在類建構函式中繫結，呼叫的時候不需要再作繫結； 結合了方法一、二、三的優點。

缺點：

帶參就會和方法三相同，這樣程式碼量就會比方法三多了。

總結 方法一是官方推薦的繫結方式，也是效能最好的方式。

方法二和方法三會有效能影響，並且當方法作為屬性傳遞給子元件的時候會引起重新渲染問題。

方法四和附加方法不做評論。

大家根據是否需要傳參和具體情況選擇適合自己的方法就好。

相關文章