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

Question

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

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

但是在其他 repo 协议(protocol)的其他地方我也看到了这个-

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