Hoc(高階組件)

• 概念
• hoc基本用法
• hoc鏈?zhǔn)秸{(diào)用
• hoc裝飾器用法

概念

1. 概念: 接受組件, 返回新組件，新的組件可以對屬性進(jìn)行包裝，重寫部分生命周期(類比高階函數(shù))

2. 例子說明: 普通函數(shù): Hoc, 高階組件: WithLog 和 WithHoc, 最終組件: HocCom

hoc基本用法

```jsx
    const WithHoc = (Com) => {
      // 獲取title,title可能來自于接口或其他手段
      const title = 'Hoc'
      // 對屬性進(jìn)行包裝(進(jìn)行title的新增)
      // return props => <Com {...props} title={title}></Com>
      // 重寫生命周期
      return class extends Component {
        componentDidMount () {
          console.log('重寫生命周期')
        }
        render () {
          return <Com {...this.props} title={title}></Com>
        }
      }
    }
```

hoc鏈?zhǔn)秸{(diào)用

```jsx
    // 普通組件
    class Hoc = () => <div>{props.stage} -- {props.title}</div>
    
    // 打印log的高階組件
    const WithLog = (Com) => {
      console.log('log');
      return props => <Com {...props}></Com>
    }
    
    // 高階組件的鏈?zhǔn)秸{(diào)用, 經(jīng)過多次包裝之后返回新的組件
    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. 裝飾器只是鏈?zhǔn)秸{(diào)用的語法糖, 使得代碼更加簡單
       
       3. 裝飾器只能裝飾在類
       
       4. 裝飾器的高階組件執(zhí)行順序是, 由下至上
   

2. 代碼

       @WithHoc
       @WithLog
       class Hoc extends Component {
         render () {
           return <div>{this.props.stage} -- {this.props.title}</div>
         }
       }
       
       // 上面是經(jīng)過高階組件包裝完成后返回的最終組件, 直接拿來用即可
       const HocCom = () => <Hoc stage='React'></Hoc>