91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

React.js綁定this的5種方法(小結)

發布時間:2020-08-23 15:40:45 來源:腳本之家 閱讀:187 作者:Monster000 欄目:web開發

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

這種方法有很多優化:

  1. 箭頭函數會自動綁定到當前組件的作用域種,不會被call改變
  2. 它避免了第2種和第3種的可能潛在的性能問題
  3. 它避免了第4種綁定時大量重復的代碼

總結:

如果你使用ES6和React 16以上的版本,最佳實踐是使用第5種方法來綁定this

參考資料:

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

this綁定裝飾器

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

台东市| 通许县| 微山县| 喀喇沁旗| 遂昌县| 庄河市| 阜新市| 密山市| 炎陵县| 吉林市| 玉溪市| 托克托县| 彭阳县| 鄢陵县| 台南市| 集贤县| 株洲市| 泸溪县| 巴南区| 汶川县| 温宿县| 安康市| 石景山区| 克东县| 永丰县| 龙泉市| 杭锦后旗| 德兴市| 时尚| 六枝特区| 炉霍县| 吉安市| 山阴县| 景泰县| 收藏| 剑河县| 武宣县| 无锡市| 普定县| 神农架林区| 黄骅市|