HOC ( Higher Order Component) 高阶组件

1. 什么是高阶组件？
   高阶组件就是一个函数， 这个函数接收一个参数， 这个参数是一个组件

2. 格式

    const Hoc = ( Comp ) => {
      return class 类名称 extends React.Component {
        render () {
          return <Comp></Comp>
        }
      }
    }
   
    //这里的Hoc就是一个高阶组件
   

3. 为什么要用高阶组件？ （ 高阶组件的好处 / 功能）
   组件复用

   接下来以一个案例的形式，来说明一个高阶组件

     import React, { Component } from 'react';
     // 高阶组件
     const Hoc = ( Comp ) => {
       return class Banner extends Component{
         banner () {
           //假设我定义个方法，这个方法就是实现一个轮播图
           return 'banner'
         }
         render () {
           return <Comp banner = { this.banner }></Comp>
         }
       }
     }
     class A extends Component {
       render () {
         return (
           <div>
             <h3> A组件 </h3>
             { this.props.banner() }
           </div>
         )
       }
     }
     class B extends Component {
       render () {
         return (
           <div>
             <h3> b组件 </h3>
             { this.props.banner() }
           </div>
         )
       }
     }
   
     const HocA = Hoc( A )
     const HocB = Hoc( B )
   
     class C extends Component {
       render () {
         return (
           <div>
             <h3> C组件 </h3>
           <HocA></HocA>
           <hr/>
           <HocB></HocB>
           </div>
         )
       }
     }
     export default C