Javascript 什么'；这是'@'；（在符号处）在Redux@connect decorator中？

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

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

虽然

connect

的功能非常简单，但我不理解

@

之前的

connect

。如果我没有错的话，它甚至不是JavaScript操作符

有人能解释一下这是什么，为什么要用它吗

更新：

---

它实际上是其中的一部分，用于将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
}

使用装饰器

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
}

---

以上两个例子都是等价的，只是偏好的问题。此外，decorator语法还没有内置到任何Javascript运行时中，并且仍然是实验性的，可能会发生变化。如果您想使用它，可以使用。

非常重要

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

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

这些道具被称为状态道具，它们不同于普通道具，对组件状态道具的任何更改都将反复触发组件渲染方法，即使您不使用这些道具，因此出于性能原因，请尝试仅绑定组件内部所需的状态道具，如果您使用子道具，则仅绑定这些道具

例如： 假设在组件内部，您只需要两个道具：

最后一条消息

用户名

不要这样做

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

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

这样做

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

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

---

我不熟悉Redux，但它看起来像一个装饰师。我喜欢在这个新的JavaScript世界中，你有一半的时间盯着代码思考“这是语言语法的哪一部分？”哈哈，我现在已经深入到redux之类的东西了。但当时我不知道decorator语法与redux无关。它只是JavaScript。很高兴看到这个问题帮助了很多像我这样的人。：）显然，redux团队不鼓励使用connect作为装饰器，目前ES6语法甚至更简洁@connect（state=>{return{todos:state.todos}；}，dispatch=>{return{actions:bindActionCreators（actionCreators，dispatch）}；}）如果您确实希望简洁，可以在ES6中使用隐式返回。这取决于你想表达得有多明确

@connect（state=>（{todos:state.todos}），dispatch=>（{actions:bindActionCreators（actionCreators，dispatch）}））

如何导出未连接的组件进行单元测试？使用decorator for redux和react导航可能会有问题，当前的最佳实践是使用函数而不是装饰器：示例非常有用，或者使用诸如重新选择或fastmemoize and之类的选择器