高階組件
高階組件就是一個沒有副作用的純函數(shù)，并且可以接收另一個函數(shù)組件作為參數(shù)老客，返回值也為一個函數(shù)組件屋剑。
高階組件其實(shí)就是裝飾器模式在 React 中的實(shí)現(xiàn)：通過給函數(shù)傳入一個組件（函數(shù)或類）后在函數(shù)內(nèi)部對該組件（函數(shù)或類）進(jìn)行功能的增強(qiáng)（不修改傳入?yún)?shù)的前提下），最后返回這個組件（函數(shù)或類）迁杨，即允許向一個現(xiàn)有的組件添加新的功能钻心，同時又不去修改該組件，屬于 包裝模式(Wrapper Pattern) 的一種仑最。
React 中的高階組件主要有兩種形式：屬性代理 和 反向繼承
屬性代理
// 無狀態(tài)(函數(shù)式組件)
function HigherOrderComponent(WrappedComponent) {
return props => <WrappedComponent {...props} />;
}
// 有狀態(tài)
function HigherOrderComponent(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
};
}
就是 一個函數(shù)接受另一個組件作為參數(shù)傳入扔役，并返回一個繼承了 React.Component 組件的類，且在該類的 render() 方法中返回被傳入的 另一個組件警医。
因?yàn)閷傩源眍愋偷母唠A組件返回的是一個標(biāo)準(zhǔn)的 React.Component 組件亿胸，所以在 React 標(biāo)準(zhǔn)組件中可以做什么，那在屬性代理類型的高階組件中就也可以做什么预皇，比如：
-
操作 props
可以為子組件添加一些屬性
-
抽離 state
利用 props 和回調(diào)函數(shù)把 state 抽離出來侈玄，可以實(shí)現(xiàn)受控組件
通過 ref 訪問到組件實(shí)例
-
用其他元素包裹傳入的組件
比如再包一層div什么的
反向繼承
function HigherOrderComponent(WrappedComponent) {
return class extends WrappedComponent {
render() {
return super.render();
}
};
}
反向繼承其實(shí)就是 一個函數(shù)接受另一個組件作為參數(shù)傳入，并返回一個繼承了該傳入組件的類吟温，且在該類的 render() 方法中返回 super.render() 方法序仙。
反向繼承可以用來做什么：
-
操作 state
高階組件中可以讀取、編輯和刪除傳入組件實(shí)例中的 state鲁豪。甚至可以增加更多的 state 項(xiàng)潘悼，但是 非常不建議這么做因?yàn)檫@可能會導(dǎo)致 state 難以維護(hù)及管理
-
渲染劫持（Render Highjacking）
- 有條件地展示元素樹（element tree）
- 操作由 render() 輸出的 React 元素樹
- 在任何由 render() 輸出的 React 元素中操作 props
- 用其他元素包裹傳入的組件 WrappedComponent （同 屬性代理）
其實(shí)屬性代理和反向繼承的實(shí)現(xiàn)有些類似的地方律秃，都是返回一個繼承了某個父類的子類，只不過屬性代理中繼承的是 React.Component治唤，反向繼承中繼承的是傳入的組件棒动。
高階組件存在的問題
-
靜態(tài)方法丟失
因?yàn)樵冀M件被包裹于一個容器組件內(nèi)，也就意味著新組件會沒有原始組件的任何靜態(tài)方法
-
refs 屬性不能透傳
如果你向一個由高階組件創(chuàng)建的組件的元素添加 ref 引用宾添，那么 ref 指向的是最外層容器組件實(shí)例的船惨，而不是被包裹的組件。
-
反向繼承不能保證完整的子組件樹被解析
我們知道反向繼承的渲染劫持可以控制傳入組件 的渲染過程缕陕，也就是說這個過程中我們可以對 elements tree粱锐、state、props 或 render() 的結(jié)果做各種操作扛邑。但是如果渲染 elements tree 中包含了 function 類型的組件的話怜浅，這時候就不能操作組件的子組件了。
應(yīng)用場景
權(quán)限控制
利用高階組件的 條件渲染 特性可以對頁面進(jìn)行權(quán)限控制
組件渲染性能追蹤
借助父組件子組件生命周期規(guī)則捕獲子組件的生命周期鹿榜，可以方便的對某個組件的渲染時間進(jìn)行記錄
頁面復(fù)用
高階組件的約定
- props 保持一致
- 你不能在函數(shù)式（無狀態(tài)）組件上使用 ref 屬性海雪，因?yàn)樗鼪]有實(shí)例
- 不要以任何方式改變原始傳入組件
- 不要透傳不相關(guān) props 屬性給被包裹的組件
- 不要再 render() 方法中使用高階組件
- 使用 compose 組合高階組件
- 包裝顯示名字以便于調(diào)試
