Question

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

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

虽然connect的功能非常简单，但我不了解@之前的connect。如果我没有错，它甚至不是JavaScript运算符。

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

更新：

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

Answer 1

> [1,2,3].reduce(:+) => 6符号实际上是JavaScript表达式currently proposed to signify decorators：

装饰器可以在设计时注释和修改类和属性。

这是一个在没有装饰器的情况下设置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);

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

Answer 2

非常重要！

这些道具被称为状态道具，它们与普通道具不同，对组件状态道具的任何更改都会一次又一次地触发组件渲染方法，即使您不使用这些道具也是如此性能原因< / strong>尝试仅在组件中绑定您需要的状态道具，如果使用子道具，则只绑定这些道具。

例如：让我们说你的组件里只需要两个道具：

最后一条消息

用户名

不要这样做

auto lambda = [value = 0]{return ++value}

执行此操作

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

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

2 个答案: