用修飾器優雅的使用高階元件

2021-09-16 12:40:25 字數 1086 閱讀 5383

一句話概括:接受乙個類作為引數的函式,用來修改類的行為。

參考阮一峰老師es6語法介紹

@testable

class mytestableclass

function testable(target)

mytestableclass.istestable // true

一句話概括:接受乙個元件作為引數,返回乙個元件的函式。

e.g.

// target 是乙個元件,它作為引數傳給了hoc這個函式

function hoc(target)

} return wrap;

}

import hoc from './hoc';

class a extends component

}export default hoc(a); //在這裡呼叫一下hoc

function hoc(target, classname) 

} return wrap;

}...export default hoc(a, 'wrap');

import hoc from './hoc';

//這這裡@一下,a就會被當做引數傳給hoc

@hoc

class a extends component

}export default a;

function hoc(classname) 

}return wrap;};}

@hoc('wrap')

class a extends component

}export default a;

//等同於

class a extends component

}export default hoc('wrap')(a);

到這裡不知道小夥伴們看懂了沒有。

我們通常使用hoc來做一些公共的邏輯,或者向子元件注入一些屬性,結合上修飾器,我們可以讓語法更加簡潔,維護起來更加方便。

antd TreeSelect 元件的高階用法

官方文件 treeselect樹選擇 總結 在使用 treeselect 元件時,往往採用構造 treedata 結構的資料來渲染,常用到的屬性值,這些已經能夠滿足一般場景。對於一些特定場景,可以靈活使用 disabled,disablecheckbox,selectable,checkable 這...

js中修飾器的使用

decorator是 乙個函式,用來修改類的行為,在 編譯時產生作用 一 類修飾 乙個引數 第乙個引數是target,指向類本身 function testable target testable class example example.istestable true 多個引數 巢狀實現 fun...

vue元件中的 sync修飾符使用

sync是vue中用於實現簡單的 雙向繫結 的語法糖,在平時的開發中是經常使用的。在vue的元件通訊props中,一般情況下,資料都是單向的,子元件不會更改父元件的值,那麼vue提供.sync作為雙向傳遞的關鍵字,實現了父元件的變動會傳遞給子元件,而子元件的show改變時,通過事件機制,修改父元件的...