React事件綁定總結

須要綁定的緣由

 

　　事件綁定目的，就是事件的做用域的轉移。

　　問題是，react生成出來的組件，this還不能指向自身嗎？

<button onClick={this.plus}>plus</button>

　　plus函數上的this，是事件響應時的上下文（window），並非當前組件實例！

　　先來看看bind方法的定義：「bind()方法建立一個新的函數， 當這個新函數被調用時其this置爲提供的值」，什麼意思呢，看代碼：

var module = { x: 42, getX: function() { return this.x; } } 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，始終指向組件提供的值。

 

 

選擇綁定方法的目的

 

　　綁定的方法有好多種，爲何須要挑選呢？咱們首先要了解到：

• DOM 是一個獨立於語言的文檔接口 API。在瀏覽器中，該 API 是用 JavaScript 實現的。但瀏覽器一般把DOM 和 JavaScript 分開實現。因此每次 JavaScript 訪問 DOM 都會伴隨着巨大的開銷。
• bind() 會建立一個綁定了做用域的函數實例。因而，從原型中實現一個實例，至關於拷貝了一份一樣的函數，這是一種巨大的浪費。React想要把系統的方法關聯到DOM上，咱們須要最優的方法進行綁定。

　　而React事件系統對DOM進行了改進，有一套高效的事件的

• 註冊
• 存儲
• 分發
• 重用

的機制，獲得了優秀的效果：

• 事件委託：react組件聲明的事件都會轉換成DOM原生事件
• 事件冒泡：以隊列的形式，能夠回溯父組件
• 合成事件：並非單純的使用DOM原生事件
• 對象池：合理管理事件對象，內存分配，垃圾回收

 

 

實現

• bind方法
• 每次從新渲染時，都會生成一個新的函數實例保存在listenerBank中
• 數量多時極其浪費內存。
• 若是是子組件的props，則會致使子組件從新渲染
• 用默認參數event來解決，如【箭頭函數-函數上】，它們會在有event參數的狀況下綁定到同一個函數上

<button onClick={this.handleEdit.bind(this, param)}>編輯</button>

• 箭頭函數上調用
• 實際效果同bind方法，一樣會形成從新綁定問題
• 能夠帶參數，可是須要把參數寫兩次，不划算

<button onClick={(param) => this.handleEdit(param)}>編輯</button>

• 構造器內部聲明
• 官方推薦，雖然代碼量多
• 事件只會生成一個

constructor(props){ super(props); this.handleEdit = this.handleEdit.bind(this); }

• 箭頭函數聲明
• 寫法簡單
• 只會生成一個
• 不能帶參數，帶參數就要寫成bind方式

const handleEdit = (e) => { console.log(e) }

• 雙冒號語法
• ::的意思是，綁定左值和右值
• 至關於.bind(this)，可是不能帶參數，不推薦

<button onClick={::this.click}></button

 

當組件的事件數量極多時，用【構造器內部聲明】方法，不然就犧牲性能來換取便捷，有參數就用【bind方法】，沒有就用【箭頭函數聲明】。這是又一個性能與業務平衡的例子。

 

 

思考

 

• 爲何在VUE中的事件不須要綁定？

<button v-on:click="say('what')">Say what</button

　　來看看官方原文：

　　印證了那句話：VUE是保時捷，react是組裝車。

 

• jQuery須要事件綁定嗎？

　　須要。可是爲了避免破壞DOM的結構，並非直接綁定在DOM上，而是經過一種緩存的方式監聽數據。