es6中的裝飾工作如何？

我學習終極版，看到這個簽名的文檔使用connect例子：es6中的裝飾工作如何？

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

但在其他回購其他地方我也看到了這個 -

@connect(mapStateToProps, mapDispatchToProps)

我得到那個相同的東西，但裝飾者的簽名是如何工作的？它看起來並不像它的設置變量到連接的結果，所以哪裏的@connect功能去並獲得分配？

來源

2017-04-17 stackjlei

可能重複的是什麼at符號做ES6的JavaScript？（ECMAScript中2015年）（http://stackoverflow.com/questions/31821084/what-does-the-at-symbol-do-in-es6-javascript-ecmascript-2015） – dork

裝飾都只是在下一個的事情，他們看到工作高階函數。

這有點作弊（不是真的那種，它是），但如果我們簡化了這一來，你可以推理只使用簡單的數值格式：

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

來源

2017-04-17 08:53:33 Norguard

如果你不明白它在理論上那麼也許視覺將有所幫助。假設您正在使用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，然後自動填充，然後在兩種情況下連接。該裝飾只是更簡單地寫少亂碼以及

來源

2017-04-17 08:41:10

怎麼辦裝飾知道拿東西'作爲他們的論據？在你的第二個例子中，你必須通過'autofill（Something）'作爲參數來連接，但是連接器是如何完成的？ – stackjlei

@stackjlei裝飾者正在裝飾一些東西。在這種情況下，當你「裝飾」任何東西時，它就是我的類「Something」，它相當於調用一個函數，並將所有的東西作爲參數傳遞給函數。如果你注意到connect，那麼reduxForm和自動填充所有這三個參數都是以類爲參數的。所以你可以在課堂上裝飾他們 –

es6中的裝飾工作如何？

回答

相關問題