什么是Redux @connect装饰器中的@(符号)?

我正在使用React学习Redux,并偶然发现了这个代码。 我不确定它是否是特定的Redux ,但是我在其中一个例子中看到了下面的代码片段。

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

虽然connect的function是相当简单的,但我不明白connect之前@ 。 如果我没有错,它甚至不是一个JavaScript运算符。

有人可以解释这是什么,为什么使用?

更新:

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

@符号实际上是一个当前提出用来表示装饰器的JavaScriptexpression式:

装饰者可以在devise时注释和修改类和属性。

下面是一个没有和装饰器设置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 。

很重要!

这些道具称为状态道具,与普通道具不同,对组件状态道具的任何更改都会触发组件渲染方法,即使您不使用这些道具也是如此,因此性能原因尝试仅绑定到组件国家道具,你需要在你的组件内,如果你使用一个子道具只绑定这些道具。

例如:让你说你的组件只需要两个道具:

  1. 最后的消息
  2. 用户名

不要这样做

 @connect(state => ({ user: state.user, messages: state.messages })) 

做这个

 @connect(state => ({ user_name: state.user.name, last_message: state.messages[state.messages.length-1] }))