React this指向問題

結合React和es6中Class類, 目的是加深理解react框架中 this 上下文指向問題,記錄筆記;

方法一：React.createClass 自動綁定

---

React 中建立組件的方式已經不少，比較古老的諸如 React.createClass 應該不少人並不陌生。固然，從 React 0.13 開始，可使用 ES6 Class 代替 React.createClass 了，這應該是從此推薦的方法。
可是須要知道，React.createClass 建立的組件，能夠自動綁定 this。也就是說，this 這個關鍵字會自動綁定在組件實例上面。

// This magically works with React.createClass
// because `this` is bound for you.
onClick = {this.handleChange}
複製代碼

固然，對於組件的建立，官方已經推薦使用 class 聲明組件或使用 functional 無狀態組件;

方法二：渲染時綁定

---

咱們假定全部的組件都採起 ES6 class 方式聲明。這種狀況下，this 沒法自動綁定。一個常見的解決方案即是：

onClick = {this.handleChange.bind(this)}
複製代碼

這種方法簡明扼要，可是有一個潛在的性能問題：當組件每次從新渲染時，都會有一個新的函數建立。 這聽上去貌似是一個很大的問題，可是其實在真正的開發場景中，由此引起的性能問題每每不值一提（除非是大型組件消費類應用或遊戲）。

方法三：箭頭函數綁定

這種方法其實和第二種相似，都是用 es6 Class定義，咱們能夠隱式綁定 this：

//普通函數
handleClick(){
        console.log('handleClick--實例',this);
};
render () {
        return (
                <div>
                    <Button type="primary" onClick={ ()=>{ this.handleClick() } }>修改 username </Button>
                </div>
        )
    }
複製代碼

固然，也與第二種方法同樣，它一樣存在潛在的性能問題。 下面將要介紹的兩種方法，能夠有效規避沒必要要的性能消耗.

方法四：Constructor 內綁定

constructor 方法是class類的默認構造方法,默認返回實例對象，經過new命令生成對象實例時，自動調用該方法。es6 阮一峯 Class

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
}
複製代碼

這種方式每每被推薦爲「最佳實踐」.
可是就我的習慣而言，我認爲與前兩種方法相比:
constructor 內綁定,在可讀性和可維護性上也有些欠缺。同時，咱們知道在 constructor 聲明的方法不會存在實例的原型prototype上，而屬於實例自己的方法。每一個實例都有一樣一個 handleChange，這自己也是一種重複和浪費。

方法五：Class 屬性中 自定義的方法用箭頭函數

//箭頭函數
handleClick = () => {
        console.log('handleClick--實例',this);
      // call this function from render 
      // and this.whatever in here works fine.
};
render () {
        return (
                <div>
                    <Button type="primary" onClick={ this.handleClick }>修改 username </Button>
                </div>
        )
    }
複製代碼

咱們來總結一下這種方式的優勢：

• 使用箭頭函數，有效綁定了 this；
  
• 沒有第二種方法和第三種方法的潛在性能問題；
  
• 避免了方法四的組件實例重複問題；
  
• 咱們能夠直接從 ES5 createClass 重構得來。
  感謝參考連接