Redux @connect装饰器中的“ @”（符号处）是什么？

Question

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

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

虽然功能connect非常简单，但我不明白@之前connect。如果我没有记错的话，它甚至都不是JavaScript运算符。

有人可以解释一下这是什么，为什么使用它？

更新：

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

Answer 1

@实际上，该符号是一个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运行时中，并且仍处于试验阶段，可能会发生变化。如果要使用它，可以使用Babel来使用。