高階函數(shù)
- 函數(shù)可以作為參數(shù)被傳遞
image
- 函數(shù)可以作為返回值輸出
image
高階組件
- 高階組件接受一個(gè)組件作為參數(shù)，并返回一個(gè)新組件的函數(shù)
- 高階組件是一個(gè)函數(shù)，并不是組件，只是為了方便而這么稱呼
使用高階組件
-
higherOrderComponent(WrappedComponent)
image @higherOrderComponent 裝飾器
高階組件應(yīng)用
-
代理方式
返回的新組件直接繼承React.Component類，新組件扮演的角色是傳入組件的代理，在新組件的render函數(shù)中，將被包裹組件渲染出來，除了高階組件自己做的工作，其余功能全部轉(zhuǎn)手給了被包裹組件
-
繼承方式
采用繼承關(guān)聯(lián)作為參數(shù)的組件和返回的組件，假如傳入的組件參數(shù)是WrappedComponent,那么返回的組件就直接繼承自WrappedComponent,這樣就可以更改傳入組件的生命周期或是一些屬性和方法
代理方式高階組件
-
操作props
新增props新增屬性
刪除屬性屬性刪除
訪問ref
-
抽取狀態(tài) 把input的狀態(tài)控制提取出來
[圖片上傳失敗...(image-20394e-1560324084744)]
受控組件 在傳入組件內(nèi)部的input直接展開{...this.newProps}
包裝組件
繼承方式高階組件
image
- 操縱props
- 操作生命周期
盡量使用代理方式，這樣對(duì)原組件的侵入方式比較小，而繼承方式，很容易影響到傳入進(jìn)來的組件
高階組件名稱
image
高階組件的靜態(tài)屬性 displayName 就是組件名
