使用 ES7 Decorators 简化this的绑定

tainzhi 发布于2019-08-22 10:36 / 648人阅读

摘要：修改文件安装插件修改中的配置安装的库写法改进

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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