Hoc(高阶组件)

• 概念
• hoc基本用法
• hoc链式调用
• hoc装饰器用法

概念

1. 概念: 接受组件, 返回新组件，新的组件可以对属性进行包装，重写部分生命周期(类比高阶函数)

2. 例子说明: 普通函数: 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. 注意

       1. 装饰器的安装使用: npm install --save-dev babel-plugin-transform-decorators-legacy
       
       2. 装饰器只是链式调用的语法糖, 使得代码更加简单
       
       3. 装饰器只能装饰在类
       
       4. 装饰器的高阶组件执行顺序是, 由下至上
   

2. 代码

       @WithHoc
       @WithLog
       class Hoc extends Component {
         render () {
           return <div>{this.props.stage} -- {this.props.title}</div>
         }
       }
       
       // 上面是经过高阶组件包装完成后返回的最终组件, 直接拿来用即可
       const HocCom = () => <Hoc stage='React'></Hoc>