es6中的裝飾器如何工作？

Question

我正在學習redux，並看到文檔中的示例使用此簽名進行connect ：

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

但是在其他倉庫中的其他地方，我也看到了這一點-

@connect(mapStateToProps, mapDispatchToProps)

我在那里也有同樣的事情，但是裝飾器的簽名如何工作？ 看起來好像沒有為connect的結果設置變量，所以@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(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，然后自動填充，然后在兩種情況下都進行連接。 裝飾器使編寫更簡單，代碼也更少混亂