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

2022-09-29 18:18:14 字數 803 閱讀 6007

前言

react事件繫結

由於類的方法預設不會繫結this,因此在呼叫的時候如果忘記繫結,this的值將會是undefined。

通常如果不是直接呼叫,應該為方法繫結this。繫結方式有以下幾種:

1. 在建構函式中使用bind繫結this

class button extends react.component

han程式設計客棧dleclick()

render()

}2. 在呼叫的時候使用bind繫結this

class button extends react.component

render()

}3. 在呼叫的時候使用箭頭函式繫結this

class button extends react.component

render()

}4. 使用屬性初始化器語法繫結this(實驗性)

class button extends react.component

rend程式設計客棧er() }比較

方式2和方式3都是在呼叫的時候再繫結this。

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

方式4:利用屬性初始化語法,將方法初始化為箭頭函式,因此在建立函式的時候就繫結了this。

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

本文標題: react學習之事件繫結的幾種方法對比

本文位址:

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

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

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

由於類的方法預設不會繫結this,因此在呼叫的時候如果忘記繫結,this的值將會是undefined。通常如果不是直接呼叫,應該為方法繫結this。繫結方式有以下幾種 class button extends react.component handleclick render class butt...

React事件繫結幾種方法測試

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