我正在学习 redux 并看到文档中的示例connect在此签名中使用：
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
但在其他仓库的其他地方，我也看到了这一点——
@connect(mapStateToProps, mapDispatchToProps)
我知道那里有同样的事情，但是装饰者的签名是如何工作的？它看起来不像是为连接的结果设置一个变量，那么@connectgo to 和 get的函数在哪里？
装饰器只是高阶函数，用于处理他们看到的下一件事情。
这有点像作弊（实际上不是这样），但是如果我们将其简化为一种格式，您可以推断仅使用简单的值：
const add = x => y => x + y;
补充的是，期望一个的功能x，并返回一个期望的功能y，
并且然后返回x + y;
你可以这样称呼它
add(1)(2); // 3
或者
const add1 = add(1);
add1(2); // 3
但是，如果我们有某种方式告诉 JS 不要期望传入最后一个值，而是只在它看到的下一个值上运行它所拥有的东西呢？
@add(1)
2; // 3
@add1
2; // 3
就像我说的，这个例子并没有真正以这种方式工作（因为装饰器函数并不是真正用于添加两个数字，而是修改类或方法或参数），但这是装饰器背后的基本概念.
@connect(mapProps, mapHandlers)
MyComponent;
和说一样
connect(mapProps, mapHandlers)(MyComponent);
如果您在理论上不理解它，那么视觉效果可能会有所帮助。假设您正在使用 redux-form 并连接和响应自动填充页面上的表单。你可以像这样使用装饰器来使用它。
@connect(mapStateToProps, mapDispatchToProps)
@autofill
@reduxForm({form: 'somethingForm', enableReinitialize: true})
class Something extends React.Component {
....
}
没有装饰器的等价物将是
class Something extends React.Component {
....
}
Something = reduxForm({
form: 'somethingForm',
enableReinitialize: true
})(Something);
Something = connect(mapStateToProps, mapDispatchToProps)(autofill(Something));
所以这样想吧。就每项功能的应用而言，从上到下依次为倒数第一。你应用 reduxForm，然后自动填充，然后在这两种情况下连接。装饰器只是让编写更简单，代码也更少混乱