關於 decorator 到底是 es 6 引入的還是 es 7 引入的我也不是很明白了，兩種說法都有，這種問題懶得糾結了……在用的時候發現這個東西很好用，平常用處可能不大，但是結合 react 就很好使了。接下來就講一講。
我搭建了乙個 react 開發環境，結合 babel 的外掛程式——babel-plugin-transform-decorators-legacy一起使用，這個外掛程式可以讓你寫 decorator。
可以通過如下命令轉殖：
$ git clone
複製**
裝飾器本身就是乙個函式，使用起來挺簡單，無非就是修飾類或者類的函式。使用@呼叫，扔在要修飾的類或者類方法前面就可以了。但是在修飾類和類函式的時候又有細微的差異。
classa}
function
sayb(target, name, descriptor)
複製**
在用裝飾器裝飾類的時候，只能夠接受乙個引數——target。這區別於上面的情況：
@aplus
class
afunction
aplus(target, name, descriptor)
複製**
@attach2prop()
class
a@attach2prop()
class
bfunction
attach2prop(obj)
}console.log((new a()).$data.name);
console.log((new b()).$data.name);
複製**
a和b。
這就就可以用同乙個裝飾器實現不同行為的裝飾了。
那麼結合 react 有什麼妙用呢？
以往在使用 react-redux 時，在定義好 ui 元件後，還要定義容器元件：
class
uicomponent
extends
react.component
const containercomponent = connect(mapstate2props, mapdispatch2props)(uicomponent);
export
default containercomponent;
複製**
@connect(mapstate2props, mapdispatch2props)
class
uicomponent
extends
react.component
export
default uicomponent;
複製**
上一小節中的容器元件實際上就是乙個高階元件，但是我們自己有時候也要定義一些高階元件，實現**的更高層次的復用。
例如：我們做了乙個元件庫，裡面有一部分的元件是有乙個功能特徵的，那就是可以拖拽；又比如我們做的移動端元件，需要實現乙個左滑刪除功能。我們需要給每種具有這個特徵的元件寫一遍拖拽或者左滑刪除邏輯嗎？
顯然是否定的，我們可以實現乙個純邏輯元件，而非 ui 元件，它的功能就是使得你的 ui 元件具有某種特定功能。比如上面提到的左滑刪除或者拖拽。
這個純邏輯元件就可以是乙個裝飾器，是乙個高階元件。
在我搭建的開發環境中，就實現了這樣乙個簡單的高階元件，讓你的 ui 元件在滑鼠滑入時顯示為乙隻手。
裝飾器**如下：
// src/decorators/cursorpointer.js
import react from
'react';
export
default component => class
extends
react.component
}>
div>
}}複製**
使用這個裝飾器：
import react from
'react';
import clickable from
'../decorators/cursorpointer';
@clickable
class
clickablepanel
extends
react.component
}export
default clickablepanel;
複製**
ES 6 裝飾器與 React 高階元件
關於 decorator 到底是 es 6 引入的還是 es 7 引入的我也不是很明白了，兩種說法都有，這種問題懶得糾結了 在用的時候發現這個東西很好用，平常用處可能不大，但是結合 react 就很好使了。接下來就講一講。我搭建了乙個 react 開發環境，結合 babel 的外掛程式 babel ...
ES6學習之裝飾器
定義 修飾器是乙個對類進行處理的函式，用來修改類的行為 注 裝飾器只能用來修改類及類的方法 類的裝飾 testable class mytestableclass function testable target mytestableclass.istestable true 注 1 testabl...
es6中的裝飾器decorator
裝飾器是一種與類 class 相關的語法，用來注釋或修改類和類方法。可以看下面的例子 testable class mytestableclass function testable target mytestableclass.istestable true所以，實際上 decorator cla...