React事件繫結幾種方法測試

2021-09-28 17:09:54 字數 1378 閱讀 8478

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

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

constructor (props)

// this.bind1 = this.bind1.bind(this) 無參寫法

this.bind1 = this.bind1.bind(this, this.state.t)

} // 無參寫法

// bind1 ()

bind1 (t, event)

render ()

}

bind2 (t, event) 

render ()

// 無參寫法同第一種

bind3 (t, event) 

render () >列印3 無參寫法

this.bind3(this.state.t, event)}>列印3

)}

bind4 = () =>

render ()

bind5()

render()

優點:

只會生成乙個方法例項;

並且繫結一次之後如果多次用到這個方法也不需要再繫結。

缺點:

即使不用到state,也需要新增類建構函式來繫結this,**量多;

新增引數要在建構函式中bind時指定,不在render中。

優點:

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

缺點:

每一次呼叫的時候都會生成乙個新的方法例項,因此對效能有影響;

當這個函式作為屬性值傳入低階元件的時候,這些元件可能會進行額外的重新渲染,因為每一次都是新的方法例項作為的新的屬性傳遞。

優點:

建立方法就繫結this,不需要在類建構函式中繫結,呼叫的時候不需要再作繫結;

結合了方法

一、二、三的優點。

缺點:

帶參就會和方法三相同,這樣**量就會比方法三多了。

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

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

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

謝謝閱讀。

更多專業前端知識,請上

【猿2048】www.mk2048.com

React事件繫結幾種方法測試

前提 es6寫法的類方法預設沒有繫結this,不手動繫結this值為undefined。因此討論以下幾種繫結方式。一 建構函式constructor中用bind繫結 constructor props this.bind1 this.bind1.bind this 無參寫法 this.bind1 t...

React學習之事件繫結的幾種方法對比

前言 react事件繫結 由於類的方法預設不會繫結this,因此在呼叫的時候如果忘記繫結,this的值將會是undefined。通常如果不是直接呼叫,應該為方法繫結this。繫結方式有以下幾種 1.在建構函式中使用bind繫結this class button extends react.compo...

React事件繫結的幾種方式對比

class button extends react.component handleclick render click me button class button extends react.component render click me button class button exten...