这个es6语法是何意思？

Question

先看代码片段

import React from 'react';
import { connect } from 'redux/react';
import { prepareRoute } from '../decorators';
import * as RepoActionCreators from '../actions/repo';
import * as UserActionCreators from '../actions/user';
import RepoList from './RepoList';

@prepareRoute(async function ({ redux, params: { username } }) {
  return await * [
    redux.dispatch(RepoActionCreators.getByUsername(username)),
    redux.dispatch(UserActionCreators.getOneByUsername(username))
  ];
})
@connect(({ Repo, User }) => ({ Repo, User }))
class UserPage extends React.Component {

  render () {
    const {
      props: {
        Repo,
        User,
        params: { username }
      }
    } = this;

    const user = User.get(username);
    const repos = Repo.get(`users/${username}`);

    return (
      <div>
        <h3>{user ? user.get('name') : 'Loading...'}</h3>
        <div>{user ? user.get('location') : 'Loading...'}</div>
        <div>{user ? user.get('bio') : 'Loading...'}</div>
        <h4>Repositories:</h4>
        {repos ? <RepoList {...{ repos }} /> : 'Loading...'}
        <p>
          <button onClick={::this.getMore}>Load more</button>
        </p>
      </div>
    );
  }

  getMore() {
    const {
      props: {
        dispatch,
        params: { username }
      }
    } = this;

    dispatch(RepoActionCreators.getMore(username));
  }
}

export default UserPage;

上面的@prepareRout， @connect怎么解释？ 感谢回复。

Answer 1

这是 ES7 的 decorator。简单地说，他的作用就是可以修改 Class 的属性，也可以用他来实现类似 mixin 的效果。

详情可以查看下面两个链接

https://github.com/wycats/javascript-decorators

http://greengerong.com/blog/2015/09/24/es7-javascript-decorators/

Answer 2

decorator 请参考 http://es6.ruanyifeng.com/#docs/decorator

Answer 3

多谢楼上两位回复。