React 事件繫結

一、class方式定義元件事件繫結的幾種方法

（一）在建構函式中使用bind繫結this

1

class button extends react.component 
6handleclick()
9render() >
12click me
1314
);15
}16 }

（二）在呼叫的時候使用bind去繫結this

1

class button extends react.component 
5render() >
8click me910
);11
}12 }

（三）呼叫的時候使用箭頭函式繫結this

1

class button extends react.component 
5render() >
8click me910
);11
}12 }

（四）使用屬性初始化語法直接繫結

1

class button extends react.component 
5render() >
8click me910
);11
}12 }

二、比較上述幾個方式的優劣

（一）方法在建構函式中繫結了 this，呼叫的時候不需要二次繫結

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

三、事件繫結方法總結

方式一是官方推薦的繫結方式，也是效能最好的方式。方式二和凡是三會有效能影響並且當方法作為屬性傳遞給子元件的時候會引起重渲問題。方式四是效能比較好的，現在 babel 已經很成熟了，推薦大家使用

React 事件繫結

一 class方式定義元件事件繫結的幾種方法 一 在建構函式中使用bind繫結this 1 class button extends react.component 6handleclick 9render 12click me 1314 15 16 二 在呼叫的時候使用bind去繫結this 1 ...

React事件繫結總結

需要繫結的原因 事件繫結目的，就是事件的作用域的轉移。問題是，react生成出來的元件，this還不能指向自身嗎？this.plus plus plus函式上的this，是事件響應時的上下文 window 並不是當前元件例項！先來看看bind方法的定義 bind 方法建立乙個新的函式，當這個新函式被...

React中繫結事件

1.事件的名稱都是react提供的，因此名稱的首字母必須大寫 onclick onmouseover 2.為事件提供的處理函式必須是如下格式 onclick 3.用的最多的事件繫結形式為 this.show 傳參 按鈕 show arg1 例如 import react from react exp...