React高阶组件详解

在说高阶组件之前，我们先了解一下什么是高阶函数和以及高阶组件的定义。

高阶组件的定义

高阶函数定义

 1.接受一个或多个函数作为输入（参数）
 2.输出一个函数

高阶函数举例：JavaScript中比较常见的filter、map、reduce都是高阶函数。

高阶组件举例：react路由5版本里的withRouter就是一个高阶组件。

高阶组件定义

1.高阶组件 本身不是一个组件，而是一个函数
2.这个函数的参数是一个组件，返回值也是一个组件

组件的名称问题：

1.在ES6中，类表达式中类名是可以省略的
2.组件的名称都可以通过displayName来修改，例如：

function HighOrderComponent(WrapperComponent){
    class NewComponent extends PureComponent{
        render(){
            return <WrapperComponent />
        }
    }

    NewComponent.displayName="CodeWhy";  
    return NewComponent;
} 

那么，高阶组件是用来干啥的呢？

高阶组件的应用主要有以下几方面：
一、增强props
有些公用数据多个子组件都会用到，就可以使用高阶组件

 

// 1. 定义高阶组件，公用数据放 return 返回的组件上
function enhanceComponent(Component) {
    return props => {
        return <Component {...props} region="中国" />
    }
}

// 2. 定义组件，使用数据
class Home extends PureComponent {

    render() {
        return <div>Home 姓名：{this.props.name} 地区：   {this.props.region}</div>
    }
}

class About extends PureComponent {
    render() {
        return <div>About 姓名：{this.props.name} 地区：{this.props.region}</div>
    }
}

// 3. 使用高阶组件，返回新组件
　const EnhanceHome = enhanceComponent(Home)
　const EnhanceAbout = enhanceComponent(About)

// 4. 父组件只需要传不一样的数据，公用的 region 已经放到 enhanceComponent 中
　export default class App extends PureComponent {
　　　　render() {
　　　　　　return (
　　　　　　　　<Fragment>
　　　　　　　　　　<EnhanceHome name="zs" />
　　　　　　　　　　<EnhanceAbout name="ls" />
　　　　　　　　</Fragment>
　　　　　　)
　　　　}
　}

 

二、登录鉴权

// 1. 定义高阶组件,根据传入 isLogin 判断返回哪个组件

function withAuth(WrappedComponent) {
    return props => {
        const { isLogin } = props;
        if (isLogin) {
            return <WrappedComponent {...props} />
        }
        return <LoginPage />
    }
}

　// 2. 定义未登录要展示的组件
　function LoginPage() {
　　　　return <button>请先登录</button>
　}

　// 3. 定义需要登录的组件
　function UserPage() {
　　　　return <h2>用户中心</h2>
　}

　// 4. 使用高阶组件，返回新组件
　const AuthUserPage = withAuth(UserPage)

　// 5. isLogin 传入 true，显示 UserPage 组件
　export default class App extends PureComponent {
　　　　render() {
　　　　　　return (
　　　　　　　　<AuthUserPage isLogin={true} />
　　　　　　)
　　　　}
　}