Javascript Redux @connect 装饰器中的“@”（at 符号）是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32646920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the '@' (at symbol) in the Redux @connect decorator?
提问by Salman
I am learning Redux with React and stumbled upon this code. I am not sure if it is Reduxspecific or not, but I have seen the following code snippet in one of the examples.
我正在用 React 学习 Redux 并偶然发现了这段代码。我不确定它是否特定于Redux，但我在其中一个示例中看到了以下代码片段。
@connect((state) => {
return {
key: state.a.b
};
})
While the functionality of connectis pretty straightforward, but I don't understand the @before connect. It isn't even a JavaScript operator if I am not wrong.
虽然 的功能connect非常简单，但我不明白@之前的connect. 如果我没记错的话，它甚至都不是 JavaScript 运算符。
Can someone explain please what is this and why is it used?
有人可以解释一下这是什么以及为什么使用它？
Update:
更新：
It is in fact a part of react-reduxwhich is used to connects a React component to a Redux store.
它实际上是react-redux其中的一部分，用于将 React 组件连接到 Redux 存储。
回答by Tanner Semerad
The @symbol is in fact a JavaScript expression currently proposed to signify decorators:
该@符号实际上是目前提议用于表示装饰器的 JavaScript 表达式：
Decorators make it possible to annotate and modify classes and properties at design time.
装饰器使得在设计时注释和修改类和属性成为可能。
Here's an example of setting up Redux without and with a 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
}
Both examples above are equivalent, it's just a matter of preference. Also, the decorator syntax isn't built into any Javascript runtimes yet, and is still experimental and subject to change. If you want to use it, it is available using Babel.
上面的两个例子是等价的，这只是一个偏好问题。此外，装饰器语法尚未内置到任何 Javascript 运行时中，并且仍处于实验阶段并且可能会发生变化。如果你想使用它，可以使用Babel。
回答by Fareed Alnamrouti
Very Important!
很重要！
These props are called state props and they are different from normal props, any change to your component state props will trigger the component render method again and again even if you don't use these props so for Performance Reasonstry to bind to your component only the state props that you need inside your component and if you use a sub props only bind these props.
这些道具称为状态道具，它们与普通道具不同，即使您不使用这些道具，对组件状态道具的任何更改都会一次又一次地触发组件渲染方法，因此出于性能原因尝试仅绑定到您的组件您在组件中需要的状态道具，如果您使用子道具，则仅绑定这些道具。
example: lets say inside your component you only need two props:
示例：让我们说在你的组件中你只需要两个道具：
- the last message
- the user name
- 最后一条消息
- 用户名
don't do this
不要这样做
@connect(state => ({
user: state.user,
messages: state.messages
}))
do this
做这个
@connect(state => ({
user_name: state.user.name,
last_message: state.messages[state.messages.length-1]
}))
