React繫結this的三種方式

react可以使用react.createclass、es6 classes、純函式3種方式構建元件。使用react.createclass會自動繫結每個方法的this到當前元件，但使用es6 classes或純函式時，就要靠手動繫結this了。接下來介紹react中三種繫結this的方法bind()function.prototype.bind(thisarg [, arg1 [, arg2, …]]) 是es5新增的函式擴充套件方法，bind()返回乙個新的函式物件，該函式的this被繫結到thisarg上，並向事件處理器中傳入引數

import react, from 'react'class test extends react.component 
}handleclick (name, e) 
render () >say hello
) }
}要注意的是，跟在this（或其他物件）後面的引數，之後它們會被插入到目標函式的引數列表的開始位置，傳遞給繫結函式的引數會跟在它們的後面。建構函式內繫結在建構函式 constructor 內繫結this，好處是僅需要繫結一次，避免每次渲染時都要重新繫結，函式在別處復用時也無需再次繫結
import react, from 'react'class test extends react.component 
this.handleclick = this.handleclick.bind(this
) }
handleclick (e) 
render () >say hello
) }
}箭頭函式箭頭函式則會捕獲其所在上下文的this值，作為自己的this值，使用箭頭函式就不用擔心函式內的this不是指向元件內部了。可以按下面這種方式使用箭頭函式：
class test extends react.component 
}handleclick (e) 
render () }>say hello
) }
}這種方式有個小問題，因為箭頭函式總是匿名的，如果你打算移除監聽事件，可以改用以下方式：
class test extends react.component 
}handleclick = (e) =>
render () >say hello
) }
}不過，在classes中直接賦值是es7的寫法，es6並不支援，只用es6的話可以用下面寫法：
class test extends react.component 
this.handleclick = (e) =>
}render () >say hello
) }
}三種方法都能實現this的繫結，至於用哪種方式還跟著自己的習慣來。

React元件繫結this的三種方法

我們在使用react元件時，呼叫方法常常用到this和event物件，預設情況是不會繫結到元件上的，需要特殊處理。節點上使用bind繫結 特點 該方法會在每次渲染元件時都會重新繫結一次，消耗一定的效能。不符合表象與行為分離準則 它屬於es5函式擴充套件的方法function.prototype.bi...

react合成事件的三種繫結方式bind

在使用es6 classes或者純函式時，不存在自動繫結，需要我們手動實現this的繫結。一 bind方法。這個方法可以繫結事件處理器內的this，並可以向事件處理器中傳遞引數，例 handleclick e,arg render 若不傳參即可寫為this.handleclick.bind this...

React中繫結this並傳參的三種方式

react中，在使用函式的過程中可能會改變this的指向，導致不能正常獲取到值的問題，所以react中有三種方式可以供我們使用，從而解決this的指向問題。bind的作用 為前面的函式，修改函式內部的this指向，讓函式內部的this，指向bind引數列表中的第乙個引數。bind中的第乙個引數，是用...