React事件繫結總結

2022-03-08 13:36:59 字數 1462 閱讀 6617

需要繫結的原因

事件繫結目的,就是事件的作用域的轉移。

問題是,react生成出來的元件,this還不能指向自身嗎?

this.plus}>plus

plus函式上的this,是事件響應時的上下文(window),並不是當前元件例項!

先來看看bind方法的定義:「bind()方法建立乙個新的函式, 當這個新函式被呼叫時其this置為提供的值」,什麼意思呢,看**:

var module =

}var unboundgetx =module.getx;

console.log(unboundgetx());

//呼叫的物件是window,所以裡面的this.x => window.x

//expected output: undefined

var boundgetx =unboundgetx.bind(module);

console.log(boundgetx()); // 但是bind之後,會將this的值置為module提供的值

//expected output: 42

所以**修改為 this.plus.bind(this)之後,不過執行時的上下文是什麼,函式的內部的this,始終指向元件提供的值。

選擇繫結方法的目的

繫結的方法有好多種,為什麼需要挑選呢?我們首先要了解到:

而react事件系統對dom進行了改進,有一套高效的事件的

的機制,得到了優秀的效果:

實現

用預設引數event來解決,如【箭頭函式-函式上】,它們會在有event引數的情況下繫結到同乙個函式上

this.handleedit.bind(this, param)}>編輯

this.handleedit(param)}>編輯

constructor(props)

const handleedit = (e) =>

this.click}>
當元件的事件數量極多時,用【構造器內部宣告】方法,否則就犧牲效能來換取便捷,有引數就用【bind方法】,沒有就用【箭頭函式宣告】。這是又乙個效能與業務平衡的例子。

思考

say what
來看看官方原文:

印證了那句話:vue是保時捷,react是組裝車。

需要。但是為了不破壞dom的結構,並不是直接繫結在dom上,而是通過一種快取的方式監聽資料。

React 事件繫結

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

React 事件繫結

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

React中繫結事件

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