溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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>
);
}
});
但是需要注意隨著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>
)
}
}
然后這種方法很明顯在可讀性和維護性上沒有第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>
)
}
}
這種方法有很多優化：
總結：
如果你使用ES6和React 16以上的版本，最佳實踐是使用第5種方法來綁定this
參考資料：
React.js pure render性能渲染反模式
this綁定裝飾器
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
