Que signifie le symbole @ devant un appel de fonction?

Question

Link to project referred to Le projet lié à a une fonction appelée connectToStores qui sont importées comme celui-ci (avec la syntaxe ES6)

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

Cependant, quand il est appelé (voir le lien ci-dessus), il y a un @ mis devant

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

La fonction connectToStores d'origine est une fonction exportée apparemment régulière. Pourquoi y a-t-il @ devant?

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} />; 
     } 
    }; 
    }; 
} 

Answer 1

Les @ sont ES7 decorators (ils sont transpiled par Babel). De la spécification:

Il est également possible de décorer une classe. Dans ce cas, le décorateur prend le constructeur cible.

// A simple decorator 
@annotation 
class MyClass { } 

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