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

Question

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

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

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

@connect(mapStateToProps, mapDispatchToProps)

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

Answer 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);

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