React進(jìn)階-高階組件

本質(zhì):高階組件本質(zhì)上就是一個函數(shù)。對只有一層的高階組件,它是純函數(shù),并且入?yún)⑹荱I組件,返回一個新的React組件。

意義:高階組件是React中邏輯復(fù)用的一種高級技巧。

高階組件的標(biāo)準(zhǔn)語法:fn(UI組件)(return props=>(<UI組件 {...props} />))

備注:{...props} 屬性繼承,在封裝高階時一定要添加屬性繼承。


高階組件

這個高階組件(高階函數(shù))就是純函數(shù),接收一個UI組件,返回一個新的React組件。

WrappedComponent,一般被稱之為“UI組件”(界面)

footer這個高階組件,一般被稱之為“容器組件”(裝飾)

一、如何使用高階組件?

1、在類組件上有兩種方式使用高階組件——函數(shù)調(diào)用、ES6裝飾器。

2、在函數(shù)式組件上只有一種方式使用高階組件——函數(shù)調(diào)用。

二、使用場景

舉例一:用高階組件實(shí)現(xiàn)頁面布局的差異化。

舉例二:用高階實(shí)現(xiàn)權(quán)限設(shè)計(jì)(適用小項(xiàng)目)。

舉例三:把一些全局的api(公共方法)通過高階組件傳遞給UI組件

三、二層的高階組件

外層是業(yè)務(wù)層,內(nèi)層是標(biāo)準(zhǔn)的高階組件

如果是多層的高階組件,其語法參考如下:

export default arg1 => arg2 = C => props => <C/>

fn()()(Home)

提示:多層的高階組件,很少很少用得到。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容