ES 6 裝飾器與 React 高階元件

2021-09-02 20:38:36 字數 2551 閱讀 5831

關於 decorator 到底是 es 6 引入的還是 es 7 引入的我也不是很明白了，兩種說法都有，這種問題懶得糾結了……在用的時候發現這個東西很好用，平常用處可能不大，但是結合 react 就很好使了。接下來就講一講。

我搭建了乙個 react 開發環境，結合 babel 的外掛程式——babel-plugin-transform-decorators-legacy一起使用，這個外掛程式可以讓你寫 decorator。

可以通過如下命令轉殖：

$ git clone 


複製**
轉殖下來以後就可以嘗試啦！

裝飾器本身就是乙個函式，使用起來挺簡單，無非就是修飾類或者類的函式。使用@呼叫，扔在要修飾的類或者類方法前面就可以了。但是在修飾類和類函式的時候又有細微的差異。

class a 


}function sayb(target, name, descriptor) 


複製**
在使用裝飾器裝飾類函式的時候，可以接受三個引數。第乙個是要修飾的物件，第二個是修飾的屬性名，第三個是屬性描述符。可以在我搭建的專案中進行嘗試。

在用裝飾器裝飾類的時候，只能夠接受乙個引數——target。這區別於上面的情況：

@aplus


class a 


function aplus(target, name, descriptor) 


複製**
另外，裝飾器還可以接受引數，返回乙個符合裝飾器規範的新函式即可，這樣又可以對裝飾器的裝飾行為進行定製了。比如：

@attach2prop()


class a 


@attach2prop()


class b 


function 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 


}複製**
這個裝飾器（高階元件）接受乙個 react 元件作為引數，然後返回乙個新的 react 元件。實現很簡單，就是包裹了一層 div，新增了乙個 style，就這麼簡單。以後所有被它裝飾的元件都會具有這個特徵。

使用這個裝飾器：

import react from 'react';


import clickable from '../decorators/cursorpointer';


@clickable


class clickablepanel extends react.component 


}export default clickablepanel;


複製**
將裝飾器與高階元件相結合，可以大大優化你的 react **！

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...