高階組件
高階組件（Higher Order Component,HOC）是React的一種設(shè)計(jì)模式，用于增強(qiáng)現(xiàn)有組件的功能。
一個(gè)高階組件就是一個(gè)函數(shù)，這個(gè)函數(shù)的輸入為組件，輸出為另一新組件。
根據(jù)輸入組件和輸出組件參數(shù)的關(guān)系，可以分為：
- 代理方式的高階組件
- 繼承方式的高階組件
- 函數(shù)式子組件
- Mixin（不要使用）
1. 代理式高階組件（推薦）
例子如下：
// 為原組件WrappedComponent增加新的屬性newProps
function addNewProps(WrappedComponent, newProps) {
return class WrappingComponent extends React.Component {
render(){
return <WrappedComponent {...this.props} {...newProps}>
}
}
}
特點(diǎn)：
- 高階組件和被包裹組件有各自的生命周期；
- 可對(duì)原組件的props進(jìn)行增強(qiáng)或者刪減
- 渲染方式為 -
return <WrappedComponent {...otherProps}/>
2.繼承式高階組件
繼承式高階組件常用于渲染劫持，例如，當(dāng)用戶處于登陸狀態(tài)時(shí)，允許組件渲染；否則渲染一個(gè)空組件。
function withAuth(WrappedComponent, newProps) {
return class WrappingComponent extends WrappedComponent {
render(){
if (this.props.loggedIn) {
this.props = {...this.props, ...newProps}
return super.render();
} else {
return null;
}
}
}
}
特點(diǎn)：
- 只有一個(gè)生命周期
- 可以對(duì)原組件的props進(jìn)行增強(qiáng)或者刪減
- 渲染方式為 -
return super.render();
3. 函數(shù)式子組件
前面兩種高階組件都會(huì)操作props，通過(guò)增減props而改變?cè)M件功能。
函數(shù)式子組件不會(huì)操作組件的props，但是，它的要求是：
- 父組件必須有子組件
- 子組件必須為函數(shù)
如下面的例子：
// 定義組件
class AddUserProp extends React.Component {
render(){
const user = 'mock user';
return this.props.children(user);
}
}
// 使用該組件
<AddUserProp>
{(user)=><div>user</div>}
</AddUserProp>
因?yàn)樽咏M件是函數(shù)，所以這種模式非常靈活。
順著這個(gè)方式往下擴(kuò)展，我們可以發(fā)現(xiàn)，這種父組件并沒(méi)有創(chuàng)建出新的組件，而是將props屬性向注入到原組件內(nèi)。
這種設(shè)計(jì)模式就是“依賴注入”。當(dāng)A依賴B時(shí)，并不要將A直接依賴B，而是將B以接口的形式傳遞給A（通過(guò)函數(shù)）。
所以，我們也可以讓父組件不包含子組件，直接將通過(guò)props函數(shù)來(lái)渲染組件。
const Auth(props) {
const user = getUser();
if (user.login){
const allProps = {...user, ...props};
return (
<React.Fragment>
{props.login(allProps)}
</React.Fragment> )
} else {
return (
<React.Fragment>
{props.nologin(props)}
</React.Fragment> )
}
}
// usage
<Auth
login={props=><Login ...props/>}>
nologin={props=><NoLogin ...props/>}
/>
4. MixIn
應(yīng)用場(chǎng)景：只能在React.createClass方式創(chuàng)建的組件類中使用，不能通過(guò)ES6 Class創(chuàng)建的組件中使用。
MixIn是一種反模式的設(shè)計(jì)，它可以繼承多個(gè)組件，包括其內(nèi)部狀態(tài)state。所以，很容易造成state混亂，官方不建議使用。
5. 注意事項(xiàng)
- 不要在組件的render中使用高階組件。因?yàn)檎{(diào)用高階組件，每次都會(huì)返回一個(gè)新組件，所以，每次render，前一次高階組件創(chuàng)建的組件都會(huì)被卸載，然后重新掛載，既影響效率，有丟失了組件及其子組件的狀態(tài)。高階組件適合在組件外部使用。
// 不好的應(yīng)用場(chǎng)景
render(){
// 每次render，enhance都會(huì)創(chuàng)建一個(gè)新組件，盡管被包裝組件沒(méi)有變化
const EnhancedComponent = enhance(MyComponent);
// 因?yàn)槭切陆M件，所以會(huì)經(jīng)歷舊組件的卸載和新組件的重新掛載
return <EnhancedComponent />
}
- 高階組件和父組件很類似。區(qū)別在于：高階組件是一個(gè)函數(shù)，關(guān)注邏輯；父組件是一個(gè)組件，關(guān)注UI/DOM。如果邏輯和DOM不相關(guān)（如數(shù)據(jù)校驗(yàn)，請(qǐng)求發(fā)送等），那么這部分邏輯適合放在高階組件里。
