HOC(Higher-order component)是壹種React 的進階使用方法,只要還是為了便於組件的復用。強調壹點,HOC本身並不是 React API, 它就是壹個方法,壹個接收壹個組件作為參數,返回壹個增強的組件的方法。
概括的講,HOC能夠實現:
1. 代碼復用,代碼模塊化
2. 渲染劫持, 操作state
3. Props 增刪改
HOC的實現方式:
在這節中我們將學習兩種主流的在 React 中實現高階組件的方法:屬性代理(Props Proxy)和 反向繼承(Inheritance Inversion)。
基於反向繼承(Inheritance Inversion, 縮寫II)的方式
反向繼承的實現為:
返回的高階組件類(Enhanced)繼承了 WrappedComponent。這被叫做反向繼承是因為 WrappedComponent 被動地被 Enhancer 繼承,而不是 WrappedComponent 去繼承 Enhancer。?
反向繼承允許高階組件通過this關鍵詞獲取 WrappedComponent,意味著它可以獲取到 state,props,組件生命周期(component lifecycle)鉤子,以及渲染方法(render)。