我正在用React学习Redux，无意中发现了这段代码。我不确定它是否是特定于Redux的，但我在其中一个示例中看到了下面的代码片段。
@connect((state) => {
return {
key: state.a.b
};
})
虽然连接的功能非常简单，但我不理解连接之前的@。如果我没说错的话，它甚至不是JavaScript操作符。
有人能解释一下这是什么，为什么要用它吗?
更新:
它实际上是React - Redux的一部分，用于将React组件连接到Redux存储。
@符号实际上是一个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。
非常重要!
这些道具被称为状态道具，它们与普通道具不同，对组件状态道具的任何更改都会一次又一次地触发组件渲染方法，即使你不使用这些道具，因此出于性能原因，尝试只绑定到组件中你需要的状态道具，如果你使用子道具，只绑定这些道具。
例子: 让我们说在你的组件中，你只需要两个道具:
最后一条信息 用户名
不要这样做
@connect(state => ({
user: state.user,
messages: state.messages
}))
这样做
@connect(state => ({
user_name: state.user.name,
last_message: state.messages[state.messages.length-1]
}))
