Question

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

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

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

@connect(mapStateToProps, mapDispatchToProps)

我得到那个相同的东西，但装饰师的签名是如何工作的？看起来它没有为连接的结果设置变量，那么@connect的功能在何处转到并被分配给？

Answer 1

装饰器只是高阶函数，可以处理他们看到的 next 事物。

这是一种作弊行为（实际上并非如此），但如果我们将其简化为一种格式，您可以推理使用简单的值：

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

Answer 2

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

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

es6中的装饰器如何工作？

2 个答案: