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

Question

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

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

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

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

更新：

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

Answer 1

@ 符号实际上是一个 JavaScript 表达式 currently proposed to signify decorators:

Decorators make it possible to annotate and modify classes and properties at design time.

下面是设置 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.

Answer 2

非常重要！

这些道具称为状态道具，它们与普通道具不同，即使您不使用这些道具，对组件状态道具的任何更改都会一次又一次地触发组件渲染方法，因此 性能原因 尝试仅将组件内部所需的状态道具绑定到您的组件，如果您使用子道具，则仅绑定这些道具。

示例：假设在你的组件中你只需要两个道具：

最后一条消息
用户名

不要这样做

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

这样做

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

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

What's the '@' (at symbol) in the Redux @connect decorator?

javascript

decorator

reactjs

redux