React高阶组件

高阶组件

1、什么是高阶组件？

高阶组件就是一个 React 组件包裹着另外一个 React 组件
因为要访问它的内部状态，所以要用到继承
高阶组件就是一个函数，它接受另一个组件作为参数，并返回一个新的组件。
当 React 组件被包裹时（warped），高阶组件会返回一个增强的 React 组件。
高阶组件让代码更具有复用性、逻辑性和抽象特性。

2、侵入式

利用super传递下去

import React from 'react';
import Loding from '../common/loading';

// 侵入式
// 因为要访问它的内部状态，所以要用到继承，继承他的父级
export default (WrapComponent)=>{
    return class extends WrapComponent{
        render(){
            if(this.state.isLoading){
                return <Loding></Loding>
            }else{
                return super.render()
            }
        }
    }
}

3、非侵入式

利用…传递下去
hoc/widthAd.jsx

import React from 'react';

// 非侵入式
// WrapComponent 被包裹的组件
export default (WrapComponent)=>{
    return class extends React.Component{
        render(){
            return <div>
                <div>
                    <p>请下载淘票票</p>
                    <a href="https://dianying.taobao.com/">下载</a>
                </div>
                <WrapComponent {...this.props}/>
            </div>
        }
    }
}

用的时候直接引入这个文件，然后抛出 export default widthAd(Tab)

4、为什么要使用高阶组件？

为了代码的复用性，减少代码的冗余
js继承的几种方式

function （this指向当前的function）
function A(){
    
}
A.protytype.add = ()=>{
    
}