Hoc(高阶组件)
概念
概念: 接受组件, 返回新组件，新的组件可以对属性进行包装，重写部分生命周期(类比高阶函数)
例子说明: 普通函数: 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>
}
// 高阶组件的链式调用, 经过多次包装之后返回新的组件
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. 装饰器的高阶组件执行顺序是, 由下至上 -
代码
@WithHoc @WithLog class Hoc extends Component { render () { return <div>{this.props.stage} -- {this.props.title}</div> } } // 上面是经过高阶组件包装完成后返回的最终组件, 直接拿来用即可 const HocCom = () => <Hoc stage='React'></Hoc>
