react 高阶组件

https://ant.design/index-cn

cnpm install antd --save
增强组建功能
一：非侵入式

import React from 'react';
import {Icon} from 'antd';
export default (WrapComponent)=>{
return class extends React.Component{
   constructor(props){
      super(props)
     }
  render(){
  renturn <div>
         <a href="www.baidu.com">
          下载知乎app 
        <Icon type="zhihu"/>
          </a> 
 <WrapComponent/>
      </div>  
}
}
}

在其他组件里，我们引用这个高阶组件

import MountApp from '../../highOrder/mountApp.jsx';
class Hot extends React.Component{
    constructor(props){
        super(props)
        this.state={
            isloade:true
        }
        
 }
 componentDidMount(){

 }
    render(){
        return <div>
            hot
        </div>
    }
}
export default MountApp(Hot)

二：侵入式组件

import React from 'react';
import {Spin} from 'antd';
import 'antd/lib/spin/style/css'; 
export default (WrapComponent)=>{
    return class extends WrapComponent{
        constructor(props){
            super(props)
        }
        componentDidMount(){
            super.componentDidMount()
        }
        render(){
            if(this.state.loading){
               return <Spin>{
                   super.render()
            }</Spin>
           
            }else{
                return  super.render()
            }
         
        }
    }
}

在其他组件里，我们引用这个高阶组件

import MountLoading from '../../highOrder/mountLoading.jsx';
 class Attention extends React.Component{
    constructor(){
        super()
        this.state={
            list:[],
            loading:true
        }
    }
    componentDidMount(){
              this.setState({
                list,
                loading:false
            })
    }
export default MountLoading(Attention)