Javascript es6中的装饰师是如何工作的？

我正在学习redux，并看到文档中的示例在此签名中使用了

connect

：

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

但在其他回购协议的其他地方，我也看到了这一点-

@connect(mapStateToProps, mapDispatchToProps)

---

我也有同样的想法，但装饰师的签名是如何工作的呢？它看起来不像是在为连接的结果设置一个变量，那么

@connect

的功能去哪里并被分配到哪里呢？

如果你在理论上不理解它，那么可能一个视觉效果会有所帮助。假设您正在使用redux表单，并对页面上的表单进行连接和反应自动填充。你可以用装饰师来这样使用它

@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，然后自动填充，然后连接。decorator只是让编写更简单，代码也不那么凌乱

decorator只是处理下一个看到的东西的高阶函数

这是一种欺骗（不是真正的欺骗），但如果我们将其简化为一种格式，您可以考虑只使用简单的值：

const add = x => y => x + y;

Add是一个需要

x

的函数，返回一个需要

y

，
然后返回

x+y

你可以这样称呼它

add(1)(2); // 3

或

但是，如果我们有办法告诉JS不要期望传递最后一个值，而只是在下一个看到的东西上运行它所拥有的东西，会怎么样呢

@add(1)
2; // 3

@add1
2; // 3

正如我所说的，这个例子实际上不是这样工作的（因为decorator函数实际上并不意味着要添加两个数字，更不用说修改类、方法或参数），但这是decorator背后的基本概念

@connect(mapProps, mapHandlers)
MyComponent;

就是说

connect(mapProps, mapHandlers)(MyComponent);

---

装饰者如何知道将

某物作为他们的参数的可能重复？在第二个示例中，您必须将
autofill（Something）
作为参数传递给connect，但是连接器是如何实现的呢？@stackjlei一个decorator正在装饰一些东西。在本例中，它是my class
Something
当您“修饰”任何内容时，它相当于调用函数并将所说的任何内容作为参数传递给函数。如果您注意到connect、reduxForm和autofill这三个函数都将类Something作为参数。最后你可以把它们都装饰在教室里！对什么是装饰师的简单解释。可能是整个互联网上唯一的一个。非常感谢。
connect(mapProps, mapHandlers)(MyComponent);