this在javascript中已經(jīng)相當(dāng)靈活，把它放到React中給我們的選擇就更加困惑了。下面一起來(lái)看看React this的5種綁定方法。

創(chuàng)新互聯(lián)建站致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)，提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷(xiāo)、小程序設(shè)計(jì)、公眾號(hào)商城、等建站開(kāi)發(fā)，創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)策劃專(zhuān)家，為不同類(lèi)型的客戶(hù)提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶(hù)在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

1.使用React.createClass

如果你使用的是React 15及以下的版本，你可能使用過(guò)React.createClass函數(shù)來(lái)創(chuàng)建一個(gè)組件。你在里面創(chuàng)建的所有函數(shù)的this將會(huì)自動(dòng)綁定到組件上。

const App = React.createClass({
 handleClick() {
  console.log('this > ', this); // this 指向App組件本身
 },
 render() {
  return (
   <div onClick={this.handleClick}>test</div>
  );
 }
});

但是需要注意隨著React 16版本的發(fā)布官方已經(jīng)將改方法從React中移除

2.render方法中使用bind

如果你使用React.Component創(chuàng)建一個(gè)組件，在其中給某個(gè)組件/元素一個(gè)onClick屬性，它現(xiàn)在并會(huì)自定綁定其this到當(dāng)前組件，解決這個(gè)問(wèn)題的方法是在事件函數(shù)后使用.bing(this)將this綁定到當(dāng)前組件中。

class App extends React.Component {
 handleClick() {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={this.handleClick.bind(this)}>test</div>
  )
 }
}

這種方法很簡(jiǎn)單，可能是大多數(shù)初學(xué)開(kāi)發(fā)者在遇到問(wèn)題后采用的一種方式。然后由于組件每次執(zhí)行render將會(huì)重新分配函數(shù)這將會(huì)影響性能。特別是在你做了一些性能優(yōu)化之后，它會(huì)破壞PureComponent性能。不推薦使用

3.render方法中使用箭頭函數(shù)

這種方法使用了ES6的上下文綁定來(lái)讓this指向當(dāng)前組件，但是它同第2種存在著相同的性能問(wèn)題，不推薦使用

class App extends React.Component {
 handleClick() {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={e => this.handleClick(e)}>test</div>
  )
 }
}

下面的方法可以避免這些麻煩，同時(shí)也沒(méi)有太多額外的麻煩。

4.構(gòu)造函數(shù)中bind

為了避免在render中綁定this引發(fā)可能的性能問(wèn)題，我們可以在constructor中預(yù)先進(jìn)行綁定。

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>
  )
 }
}

然后這種方法很明顯在可讀性和維護(hù)性上沒(méi)有第2種和第3種有優(yōu)勢(shì)，但是第2種和第3種由于存在潛在的性能問(wèn)題不推薦使用，那么現(xiàn)在推薦 ECMA stage-2 所提供的箭頭函數(shù)綁定。

5.在定義階段使用箭頭函數(shù)綁定

要使用這個(gè)功能，需要在.babelrc種開(kāi)啟stage-2功能，綁定方法如下：

class App extends React.Component {
 constructor(props) {
  super(props);
 }
 handleClick = () => {
  console.log('this > ', this);
 }
 render() {
  return (
   <div onClick={this.handleClick}>test</div>
  )
 }
}

這種方法有很多優(yōu)化：

1. 箭頭函數(shù)會(huì)自動(dòng)綁定到當(dāng)前組件的作用域種，不會(huì)被call改變
2. 它避免了第2種和第3種的可能潛在的性能問(wèn)題
3. 它避免了第4種綁定時(shí)大量重復(fù)的代碼

總結(jié)：

如果你使用ES6和React 16以上的版本，最佳實(shí)踐是使用第5種方法來(lái)綁定this

參考資料：

React.js pure render性能渲染反模式

this綁定裝飾器

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)題目：React.js綁定this的5種方法(小結(jié))
標(biāo)題鏈接：http://www.rwnh.cn/article10/gdipgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站內(nèi)鏈、服務(wù)器托管、網(wǎng)頁(yè)設(shè)計(jì)公司、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)