React.js繫結this的5種方法
this在javascript中已經相當靈活，把它放到React中給我們的選擇就更加困惑了。下面一起來看看React this的5種繫結方法。
1.使用React.createClass
如果你使用的是React 15及以下的版本，你可能使用過React.createClass函式來建立一個元件。你在裡面建立的所有函式的this將會自動繫結到元件上
const App = React.createClass({
handleClick() {
console.log('this > ', this); // this 指向App元件本身
},
render() {
return (
<div onClick={this.handleClick}>test</div>
);
}
});
前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力
群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。
但是需要注意隨著React 16版本的釋出官方已經將改方法從React中移除
2.render方法中使用bind
如果你使用React.Component建立一個元件，在其中給某個元件/元素一個onClick屬性，它現在並會自定繫結其this到當前元件，解決這個問題的方法是在事件函式後使用.bing(this)將this繫結到當前元件中。
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick.bind(this)}>test</div>
)
}
}
這種方法很簡單，可能是大多數初學開發者在遇到問題後採用的一種方式。然後由於元件每次執行render將會重新分配函式這將會影響效能。特別是在你做了一些效能優化之後，它會破壞PureComponent效能。不推薦使用
3.render方法中使用箭頭函式
這種方法使用了ES6的上下文繫結來讓this指向當前元件，但是它同第2種存在著相同的效能問題，不推薦使用
class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={e => this.handleClick(e)}>test</div>
)
}
}
下面的方法可以避免這些麻煩，同時也沒有太多額外的麻煩。
4.建構函式中bind
為了避免在render中繫結this引發可能的效能問題，我們可以在constructor中預先進行繫結。
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力
群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。
然後這種方法很明顯在可讀性和維護性上沒有第2種和第3種有優勢，但是第2種和第3種由於存在潛在的效能問題不推薦使用，那麼現在推薦 ECMA stage-2 所提供的箭頭函式繫結。
5.在定義階段使用箭頭函式繫結
要使用這個功能，需要在.babelrc種開啟stage-2功能，繫結方法如下：
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}
這種方法有很多優化：
- 箭頭函式會自動繫結到當前元件的作用域種，不會被call改變
- 它避免了第2種和第3種的可能潛在的效能問題
- 它避免了第4種繫結時大量重複的程式碼
總結：
如果你使用ES6和React 16以上的版本，最佳實踐是使用第5種方法來繫結this
最好歡迎大家進入前端全棧學習交流圈：866109386.免費資料等你領取。
