Javascript Redux @connect decorator 中的@(at 符号)是什么

发布于09月20日

我正在用React学习Redux，偶然发现了这段代码.我不确定它是否是Redux特定的，但我在其中一个示例中看到了以下代码片段.

@connect((state) => {
  return {
    key: state.a.b
  };
})

虽然connect的功能非常简单，但我不理解connect之前的@.如果我没有错的话，它甚至不是一个JavaScript操作符.

有人能解释一下这是什么吗？为什么要用它？

更新:

它实际上是react-redux的一部分，用于将React组件连接到Redux存储.

推荐答案

@符号实际上是一个JavaScript表达式currently proposed to signify decorators:

decorator 使在设计时注释和修改类和属性成为可能.

下面是一个设置Redux的示例，其中没有装饰者和有装饰者:

Without a decorator个

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

Using a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

上面的两个例子都是等价的，这只是一个偏好问题.此外，修饰器语法还没有内置到任何Javascript运行时中，它仍然是试验性的，可能会发生变化.如果你想用它，用Babel就可以买到.