使用 ES7 Decorators 簡(jiǎn)化this的綁定

tainzhi 發(fā)布于2019-08-22 10:36 / 665人閱讀

摘要：修改文件安裝插件修改中的配置安裝的庫(kù)寫法改進(jìn)

1.修改babelrc文件

{
  "presets": ["es2015", "react", "stage-1"],
  "plugins": ["transform-decorators-legacy"]
}

2.安裝 decorator 插件

npm i -S babel-plugin-transform-decorators-legacy

3.修改webpack中l(wèi)oader的配置

module: {
  loaders: [
    {
      test: /.js$/,
      exclude: /node_modules/(?!(stardust))/,
      loader: "babel",
      query: {
        cacheDirectory: true,
        plugins: [
          "transform-runtime",
          "add-module-exports",
          "transform-decorators-legacy",
        ],
        presets: ["es2015", "react", "stage-1"],
      },
    }
  ]
}

4.安裝autobind 的庫(kù)

npm install autobind-decorator

5.寫法改進(jìn)

class MyClass extends Component {
  constructor(props, context) {
    this.onChange = this.onChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    
    this.state = {isLoading: true}
  }
  
  onChange() {}
  handleSubmit() {}
}

class MyClass extends Component {
  state = {isLoading: true}
  
  @autobind
  onChange() {}
  
  @autobind
  handleSubmit() {}
}

云服務(wù)器 GPU云服務(wù)器 decorators this的用法 this的指向 php 的$this

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90907.html

相關(guān)文章

react系列-bind this

摘要：幸運(yùn)的是，已經(jīng)提供了對(duì)這個(gè)新語(yǔ)法的支持。而且函數(shù)綁定語(yǔ)法屬于草案中的特性，尚未納入標(biāo)準(zhǔn)。方案和方案會(huì)增加代碼量方案需要引入第三方庫(kù)，不過(guò)提供了很多使用的裝飾器。常用的方案是方案和方案刪除箭頭函數(shù)刪除問(wèn)題對(duì)于大多數(shù)前端開發(fā)來(lái)說(shuō)，JavaScript 的 this 關(guān)鍵字會(huì)造成諸多困擾，由于 JavaScript 代碼中的 this 指向并不清晰。在寫react應(yīng)用時(shí)，也會(huì)也到很多作...

XGBCCC 2019-08-21 14:38 評(píng)論0 收藏0
ES7 Decorators（修飾器）

ES6 Decorators（修飾器）修飾器（Decorator）是一個(gè)函數(shù)，用來(lái)修改類的行為。這是ES7的一個(gè)提案，目前Babel轉(zhuǎn)碼器已經(jīng)支持我們?cè)谟螒虼笮晚?xiàng)目種經(jīng)常會(huì)用到的方法，現(xiàn)在es6直接支持想要使用Decorator的話需要我們配置一下文件夾，配置一下環(huán)境 npm install babel-plugin-transform-decorators-legacy --save-de...

張漢慶 2019-08-20 18:11 評(píng)論0 收藏0
ES6中React Mixins的使用（第四部分）

摘要：在的組建創(chuàng)建中，不太可能使用混合機(jī)制。在中，這個(gè)組建將被命名為。他們中的其中一個(gè)如下結(jié)論高階組建功能強(qiáng)大和極具表現(xiàn)力。現(xiàn)在高階組建廣泛的被使用來(lái)替代老式的句法。這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第四篇。下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類...

Karrdy 2019-08-20 17:59 評(píng)論0 收藏0
在 Web 應(yīng)用中使用 ES7 裝飾器（Decorator）初體驗(yàn)

摘要：前言今天閑來(lái)時(shí)看了看中的新標(biāo)準(zhǔn)之一，裝飾器。過(guò)程中忽覺(jué)它和中的注解有一些類似之處，并且當(dāng)前版本的中已經(jīng)支持它了，所以，就動(dòng)手在一個(gè)應(yīng)用中嘗鮮初體驗(yàn)了一番。另外，由于裝飾器目前還是中的一個(gè)提案，其中具體細(xì)節(jié)可能還會(huì)更改。前言今天閑來(lái)時(shí)看了看ES7中的新標(biāo)準(zhǔn)之一，裝飾器（Decorator）。過(guò)程中忽覺(jué)它和Java中的注解有一些類似之處，并且當(dāng)前版本的TypeScript中已經(jīng)支持它了...

ivan_qhz 2019-08-19 17:27 評(píng)論0 收藏0
react+mobx+thrift學(xué)習(xí)demo

摘要：安裝等相關(guān)依賴。通過(guò)啟動(dòng)項(xiàng)目，進(jìn)行后續(xù)操作。自定義執(zhí)行狀態(tài)的改變。任何不在使用狀態(tài)的計(jì)算值將不會(huì)更新，直到需要它進(jìn)行副作用操作時(shí)。強(qiáng)烈建議始終拋出錯(cuò)誤，以便保留原始堆棧跟蹤。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 寫法 step 2 mobx 了解&使用 step 3 thrift接口調(diào)用過(guò)程 Re...

xcc3641 2019-08-23 11:44 評(píng)論0 收藏0