ES6 javascript中的at符号(@)有什么作用?(ECMAScript 2015)

我正在查看一些ES6代码,但我不明白将@符号放在变量前面时的作用。我能找到的最接近的事物与私有字段有关?

我在redux库中查看的代码

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions';

@connect(state => ({
  counter: state.counter
}))
export default class CounterApp extends Component {
  render() {
    const { counter, dispatch } = this.props;
    return (
      <Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} />
    );
  }
}

这是我在该主题上找到的博客文章:https : //github.com/zenparsing/es-private-fields

在这篇博客文章中,所有示例都在类的上下文中-当在模块中使用符号时,这意味着什么?

小小2020/04/03 11:45:23

我发现接受的答案还不足以帮助我解决问题,因此我添加了更多细节来帮助其他人找到此问题。

问题在于尚不清楚 decorator到底是什么给定示例中的 decorator不仅是@符号,而且是@connect函数。简单地说,该@connect功能被装饰CounterApp类。

在这种情况下该怎么办?连接state.counter价值类的道具。请记住,在redux中,该connect函数接受两个参数:mapStateToPropsmapDispatchToProps在此示例中,仅采用一个参数- mapStateToProps

我还没有对此进行过多研究,但这似乎是封装状态到属性映射和调度到属性映射的一种方法,这样它们就可以随组件一起使用,而不必位于其他文件中。

2020/04/03 11:45:23

是个装饰工这是要添加到ECMAScript中建议以下是多个ES6和ES5等效的示例:javascript-decorators

decorator可以动态更改功能,方法或类的功能,而不必直接使用子类或更改要修饰的功能的源代码。

它们通常用于控制访问,注册,注释。