Hoc(高階組件)
概念
概念: 接受組件, 返回新組件扳抽，新的組件可以對屬性進行包裝宴凉，重寫部分生命周期(類比高階函數(shù))
例子說明: 普通函數(shù): Hoc, 高階組件: WithLog 和 WithHoc, 最終組件: HocCom
hoc基本用法
```jsx
const WithHoc = (Com) => {
// 獲取title,title可能來自于接口或其他手段
const title = 'Hoc'
// 對屬性進行包裝(進行title的新增)
// return props => <Com {...props} title={title}></Com>
// 重寫生命周期
return class extends Component {
componentDidMount () {
console.log('重寫生命周期')
}
render () {
return <Com {...this.props} title={title}></Com>
}
}
}
```
hoc鏈式調用
```jsx
// 普通組件
class Hoc = () => <div>{props.stage} -- {props.title}</div>
// 打印log的高階組件
const WithLog = (Com) => {
console.log('log');
return props => <Com {...props}></Com>
}
// 高階組件的鏈式調用, 經(jīng)過多次包裝之后返回新的組件
const NewHoc = WithLog(WithHoc(WithLog(Hoc)));
// 最終使用
const HocCom = () => <NewHoc stage='React'></NewHoc>
```
hoc裝飾器用法
-
注意
1. 裝飾器的安裝使用: npm install --save-dev babel-plugin-transform-decorators-legacy 2. 裝飾器只是鏈式調用的語法糖, 使得代碼更加簡單 3. 裝飾器只能裝飾在類 4. 裝飾器的高階組件執(zhí)行順序是, 由下至上 -
代碼
@WithHoc @WithLog class Hoc extends Component { render () { return <div>{this.props.stage} -- {this.props.title}</div> } } // 上面是經(jīng)過高階組件包裝完成后返回的最終組件, 直接拿來用即可 const HocCom = () => <Hoc stage='React'></Hoc>
