高階組件(Higher-Order Components)
高階組件（HOC）是 React 中用于重用組件邏輯的高級技術(shù)。 HOC 本身不是 React API 的一部分硫狞。 它們是從 React 構(gòu)思本質(zhì)中浮現(xiàn)出來的一種模式。
具體來說迄埃，高階組件是一個(gè)函數(shù)蜂挪，能夠接受一個(gè)組件并返回一個(gè)新的組件权薯。
在我們項(xiàng)目中使用react-redux框架的時(shí)候，有一個(gè)connect的概念撩鹿，這里的connect其實(shí)就是一個(gè)高階組件谦炬。也包括類似react-router-dom中的withRouter的概念
構(gòu)建一個(gè)簡單的hoc
function hello (){
console.log("hello i love react ")
}
function hoc(fn){
return ()=>{
console.log("first");
fn();
console.log("end");
}
}
hello = hoc(hello);
hello();
實(shí)現(xiàn)高階組件的方法
實(shí)現(xiàn)高階組件的方法有如下兩種：
- 屬性代理。高階組件通過唄包裹的React組件來操作props
- 反向繼承节沦。高階組件繼承于被包裹的React組件
接下來我們分別來闡述這兩種方法键思。
屬性代理
屬性代理是我們r(jià)eact中常見高階組件的實(shí)現(xiàn)方法，我們通過一個(gè)例子來說明：
import React,{Component} from 'react';
const MyContainer = (WraooedComponent) =>
class extends Component {
render(){
return <WrappedComponent {...this.props} />
}
}
從這里看到最重要部分是render 方法中返回了傳入 WrappedComponent的React組件甫贯。這樣吼鳞，我們就可以通過高階組件來傳遞props。這種方法即為屬性代理叫搁。
自然赔桌，我們想要使用MyContainer這個(gè)高階組件就變得非常容易：
import React,{Component} from 'react';
class MyComponent extends Component{
//...
}
export default MyContainer(MyComponent);
這樣組件就可以一層層地作為參數(shù)被調(diào)用供炎，原始組件就具備了高階組件對它的修飾。就這么簡單疾党，保持單個(gè)組件封裝性的同時(shí)還保留了易用性碱茁。當(dāng)然，我們也可以用decorator來轉(zhuǎn)換仿贬。
當(dāng)使用屬性代理構(gòu)建高階組件時(shí)纽竣，調(diào)用順序不同于mixin。上述執(zhí)行生命周期的過程類似于堆棧調(diào)用：
didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount
反向繼承
另一種構(gòu)建高階組件的方法稱為反向繼承茧泪，從字面意思上看蜓氨，它一定與繼承性相關(guān)。我們同樣來看一個(gè)簡單的實(shí)現(xiàn)队伟。
const MyContainer = (WrappedComponent)=>{
class extends WrappedComponent {
render(){
return super.render();
}
}
}
如上代碼穴吹。高階組件返回的組件繼承于 WrappedComponent 。因?yàn)楸粍?dòng)地繼承了 WrappedComponent嗜侮，所有的調(diào)用都會(huì)反向港令，這也是種方法的由來。
這種方法與屬性代理不太一樣锈颗。它通過繼承WrappedComponent來實(shí)現(xiàn)顷霹，方法可以通過super來順序調(diào)用。因?yàn)橐蕾囉诶^承機(jī)制击吱。HOC的調(diào)用順序和隊(duì)列是一樣的淋淀。
didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)
在反向繼承方法中，高階組件可以使用 WrappedComponent 引用覆醇，這意味著它可以使用 WrappedComponent 的state 朵纷、props。生命周期和render方法永脓。但它不能保證完整的子組件樹被解析袍辞。它有兩個(gè)比較大的特點(diǎn)，下面我們展開來講一講常摧。
渲染劫持
渲染劫持就是指的是高階組件可以控制 WrappedComponent的渲染過程搅吁，并渲染各種各樣的結(jié)果。我們可以在這個(gè)過程中在任何React元素輸出的結(jié)果中讀取排宰、增加似芝、修改、刪除props板甘，或讀取或修改React元素樹党瓮，或條件顯示。又或者用樣式包裹元素樹
控制state
高階組件可以讀取盐类、修改或刪除WrappedComponent實(shí)例中的state寞奸，如果需要的話呛谜，也可以增加state。
組件命名
當(dāng)包裹一個(gè)高階組件時(shí)枪萄，我們失去了原始 WrappedComponent的displayName隐岛，而組件名字是方便我們開發(fā)與調(diào)試的重要屬性。
組件參數(shù)
有時(shí)瓷翻，我們調(diào)用高階組件需要傳入一些參數(shù)聚凹，這可以用非常簡單的方式來實(shí)現(xiàn)。
import React from 'react'
function HOCFactoryFactory(...params){
return function HOCFactory(WrappedComponent){
return class HOC extends Component{
render(){
return <WrappedComponent {...this.props} />
}
}
}
}
當(dāng)你使用的時(shí)候齐帚，可以這么寫：
HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)
class WrappedComponent extends React.Component{}
