本質(zhì):高階組件本質(zhì)上就是一個函數(shù)佳魔。對只有一層的高階組件合愈,它是純函數(shù)照捡,并且入?yún)⑹荱I組件颅湘,返回一個新的React組件话侧。
意義:高階組件是React中邏輯復用的一種高級技巧栗精。
高階組件的標準語法:fn(UI組件)(return props=>(<UI組件 {...props} />))
備注:{...props} 屬性繼承,在封裝高階時一定要添加屬性繼承瞻鹏。
這個高階組件(高階函數(shù))就是純函數(shù)悲立,接收一個UI組件,返回一個新的React組件新博。
WrappedComponent薪夕,一般被稱之為“UI組件”(界面)
footer這個高階組件,一般被稱之為“容器組件”(裝飾)
一赫悄、如何使用高階組件原献?
1、在類組件上有兩種方式使用高階組件——函數(shù)調(diào)用埂淮、ES6裝飾器姑隅。
2、在函數(shù)式組件上只有一種方式使用高階組件——函數(shù)調(diào)用倔撞。
二讲仰、使用場景
舉例一:用高階組件實現(xiàn)頁面布局的差異化。
舉例二:用高階實現(xiàn)權(quán)限設(shè)計(適用小項目)痪蝇。
舉例三:把一些全局的api(公共方法)通過高階組件傳遞給UI組件
三鄙陡、二層的高階組件
外層是業(yè)務(wù)層,內(nèi)層是標準的高階組件
如果是多層的高階組件躏啰,其語法參考如下:
export default arg1 => arg2 = C => props => <C/>
fn()()(Home)
提示:多層的高階組件趁矾,很少很少用得到。