javascript - 函数调用前的@是什么意思?

标签 javascript reactjs ecmascript-6 babeljs

<分区>

Link to project referred to链接到的项目有一个名为 connectToStores 的函数,它像这样导入(使用 es6 语法)

import connectToStores from '../utils/connectToStores'; 

但是,当它被调用时(见上面的链接),有一个 @ 放在前面

@connectToStores([RepoStore, StargazersByRepoStore, UserStore], getState)

原来的connectToStores函数是一个看似常规的导出函数。为什么前面要加@

export default function connectToStores(stores, getState) {
  return function (DecoratedComponent) {
    const displayName =
      DecoratedComponent.displayName ||
      DecoratedComponent.name ||
      'Component';

    return class StoreConnector extends Component {
      static displayName = `connectToStores(${displayName})`;

      constructor(props) {
        super(props);
        this.handleStoresChanged = this.handleStoresChanged.bind(this);

        this.state = getState(props);
      }

      componentWillMount() {
        stores.forEach(store =>
          store.addChangeListener(this.handleStoresChanged)
        );
      }

      componentWillReceiveProps(nextProps) {
        if (!shallowEqual(nextProps, this.props)) {
          this.setState(getState(nextProps));
        }
      }

      componentWillUnmount() {
        stores.forEach(store =>
          store.removeChangeListener(this.handleStoresChanged)
        );
      }

      handleStoresChanged() {
        this.setState(getState(this.props));
      }

      render() {
        return <DecoratedComponent {...this.props} {...this.state} />;
      }
    };
  };
}

最佳答案

那些 @ES7 decorators (它们通过 Babel 转译)。来自规范:

It is also possible to decorate a class. In this case, the decorator takes the target constructor.

// A simple decorator
@annotation
class MyClass { }

function annotation(target) {
   // Add a property on target
   target.annotated = true;
}

关于javascript - 函数调用前的@是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33003998/

相关文章:

javascript - 为什么在 React 中需要两次绑定(bind) onClick?

javascript - 将 Promise.all 与 React-Redux-Thunk 一起使用的更好/正确方法是什么?

javascript - 如何在 chrome 中获取 JS 错误以显示正确的行号?

javascript - 在按键上应用滚动动画,使其与鼠标单击时的滚动动画相同

javascript - 为什么这个不正确的 JavaScript 程序会产生正确的答案?

javascript - 无法从组件数组中删除元素(slice、Vue.js)

javascript - jQuery Validate 的自定义验证(二合一方法)

javascript - 如何将包装在 Promise 中的值传递给非异步函数?

javascript - jquery中的事件序列

javascript - 检查 .ajax 请求后加载的所有图像?