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

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

參考阮一峰老師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改變時，通過事件機制，修改父元件的...