React事件優雅綁定

2018-01-11 19:00 更新（目前最優解）

收到 光 同窗的提醒，與其讓ESLint報錯，不如在調用時候作一些修改，上代碼，就是在調用事件的時候，從新用箭頭函數再包裹一層，拍腦殼表示爲啥本身沒想到。

render(){
  return(
        <button // 修改的部分在這裏，我知道這麼寫註釋是不對的，別學我 onClick={()=>{this.handleSubmit(params)}} > 提交 </button>
  )
}
handleSubmit = () =>{
    // do something
}
複製代碼

這樣真的是，在調用函數的時候使用箭頭函數並傳遞一個參數進去，這樣達成了指望的效果，又避免了ESLint的報錯，簡直6666…

---

下面的內容只是一些其餘方法，隨意看看就好…

常規狀況下使用React在節點上綁定事件是這樣

render(){
        return(
        	<button onClick={this.handleClick.bind(this，params)}>Submit</button>
        )
	}
	handleClick(params){
		// do something
	}
複製代碼

可是這種狀況下每次數據發生變化的時候，都要從新調用render函數，事件也要從新綁定this指向，會比較耗費性能，因而出現了下面這種方式

---

在構造函數內部聲明事件方法

constructor(props){
		super(props);
        // 在構造函數內部聲明事件方法
		this.handleClick = this.handleClick.bind(this)
	}
	render(){
        return(
        	<button onClick={this.handleClick}>Submit</button>
        )
	}
	handleClick(params){
		// do something
	}
複製代碼

這種方法使得在方法在組件調用的時候就在constructer被聲明，當數據進行從新渲染時，事件不會在從新綁定this指向，可是這個操做有兩個弊端：

1. 代碼量增長，須要在constructer聲明；
2. 在須要傳遞參數的時候仍是須要從新bind(this,params);

---

在ES6出現以後，咱們能夠經過箭頭函數=>來簡化this的指向問題：

render(){
        return(
        	<button onClick={this.handleClick}>Submit</button>
        )
	}
	handleClick = () => {
		// do something
	}
複製代碼

可是這個方式也只是解決了減小代碼量的問題，在須要傳參的地方仍是須要使用.bind(this,params)的方式，這就十分尷尬了。

---

使用ES6+Function.prototype的方法（不推薦，下面還提供了一個方法）

這個時候，咱們會想何不爲ES6重寫個bind。箭頭函數只寫一次，bind不用傳this，沒錯！咱們就是這麼想的！

// 咱們在Function的prototype上新建一個fBind方法，並寫在入口文件中
Function.prototype.fBind = function(...args){
	var Fn = this;
	return function(e){
		Fn(...args,e);
	}
}
複製代碼

而後，咱們在組件中寫事件和傳參就能夠變得無比清爽了...

render(){
        return(
        	<button onClick={this.handleWithParams.fBind(params)}>有參數Submit</button>
        	<button onClick={this.handleWithoutParams}>無Submit</button>
        )
	}
    // 帶參數事件
	handleWithParams = (params) => {
		console.log(params);
		// do something
	}
    // 不帶參數事件
    handleWithoutParams = () =>{
        // do something
    }
複製代碼

在不須要傳參的地方仍是，惟一的缺陷是Eslint會報錯，提示不能夠在Function的prototype上自定義方法，這個看你了…😂😂😂

吐槽：掘金的markdown真難用，本身電腦上展現得好好的，貼過來就亂七八糟的……