es6中的装饰器如何工作？

Question

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

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

但在其他地方,我也见过这个 -

@connect(mapStateToProps, mapDispatchToProps)

我得到那个相同的东西,但装饰师的签名是如何工作的？它看起来不像是为连接的结果设置一个变量,那么@connectgo和to 的功能在哪里？

Answer 1

装饰器只是高阶函数,可以用于他们看到的下一件事.

这有点作弊(不是真的那样),但是如果我们将其简化为一种格式,你可以推理使用简单的值:

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