什么是'(at符号)在Redux @connect装饰器?

我正在用React学习Redux，无意中发现了这段代码。我不确定它是否是回来的特定的，但我在其中一个例子中看到了下面的代码片段。

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

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

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

更新:

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

67077

小开

最佳答案

@符号实际上是一个JavaScript表达式目前建议表示装饰器:

装饰器使得在设计时注释和修改类和属性成为可能。

下面是一个没有和使用装饰器设置Redux的例子:

没有装饰器

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);

使用装饰器

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运行时中，仍然处于实验阶段，可能会发生变化。如果你想使用它，可以使用巴别塔。