使用 ES7 Decorators 簡化this的綁定

tainzhi 發布于2019-08-22 10:36 / 662人閱讀

摘要：修改文件安裝插件修改中的配置安裝的庫寫法改進

1.修改babelrc文件

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

2.安裝 decorator 插件

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

3.修改webpack中loader的配置

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 的庫

npm install autobind-decorator

5.寫法改進

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

云服務器 GPU云服務器 decorators this的用法 this的指向 php 的$this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90907.html

react系列-bind this

摘要：幸運的是，已經提供了對這個新語法的支持。而且函數綁定語法屬于草案中的特性，尚未納入標準。方案和方案會增加代碼量方案需要引入第三方庫，不過提供了很多使用的裝飾器。常用的方案是方案和方案刪除箭頭函數刪除問題對于大多數前端開發來說，JavaScript 的 this 關鍵字會造成諸多困擾，由于 JavaScript 代碼中的 this 指向并不清晰。在寫react應用時，也會也到很多作...

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

ES6 Decorators（修飾器）修飾器（Decorator）是一個函數，用來修改類的行為。這是ES7的一個提案，目前Babel轉碼器已經支持我們在游戲大型項目種經常會用到的方法，現在es6直接支持想要使用Decorator的話需要我們配置一下文件夾，配置一下環境 npm install babel-plugin-transform-decorators-legacy --save-de...

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

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

Karrdy 2019-08-20 17:59 評論0 收藏0
在 Web 應用中使用 ES7 裝飾器（Decorator）初體驗

摘要：前言今天閑來時看了看中的新標準之一，裝飾器。過程中忽覺它和中的注解有一些類似之處，并且當前版本的中已經支持它了，所以，就動手在一個應用中嘗鮮初體驗了一番。另外，由于裝飾器目前還是中的一個提案，其中具體細節可能還會更改。前言今天閑來時看了看ES7中的新標準之一，裝飾器（Decorator）。過程中忽覺它和Java中的注解有一些類似之處，并且當前版本的TypeScript中已經支持它了...

ivan_qhz 2019-08-19 17:27 評論0 收藏0
react+mobx+thrift學習demo

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

xcc3641 2019-08-23 11:44 評論0 收藏0