es6 中的装饰器是如何工作的？

Posted 2023-02-23

【中文标题】es6 中的装饰器是如何工作的？

【英文标题】：How do decorators in es6 work?

【发布时间】：2017-09-12 19:28:46

【问题描述】：

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

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

但在其他仓库的其他地方，我也看到过这个-

@connect(mapStateToProps, mapDispatchToProps)

我得到了同样的东西，但是装饰器的签名是如何工作的？它看起来不像是在为连接的结果设置一个变量，那么@connect 的函数去哪里分配？

【问题讨论】：

What does the at symbol do in ES6 javascript? (ECMAScript 2015)的可能重复

【参考方案1】：

装饰器只是处理他们看到的下一个事物的高阶函数。

这有点作弊（不是真的，确实是这样），但如果我们将其简化为您可以推断出只使用简单值的格式：

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

Add 是一个需要 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);

【讨论】：

终于！对装饰器是什么的简单解释。可能是整个互联网上唯一的一个。谢谢

【参考方案2】：

如果您在理论上不理解它，那么视觉效果可能会有所帮助。假设您正在使用 redux-form 和 connect 和 react-autofill 来处理页面上的表单。你可以使用装饰器来使用它。

@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，然后自动填充，然后在两种情况下都连接。装饰器只是让编写更简单，代码也更少混乱

【讨论】：

装饰者如何知道将Something 作为参数？在您的第二个示例中，您必须将 autofill(Something) 作为参数传递给连接，但是连接器是如何完成的？

@stackjlei 装饰者正在装饰一些东西。在这种情况下，它是我的类Something，当你“装饰”任何东西时，它相当于调用一个函数并将所说的任何东西作为参数传递给函数。如果你注意到 connect、reduxForm 和 autofill 这三个都将类 Something 作为参数。所以你可以在课堂上装饰它们