前言

上篇文章给大家介绍了高阶函数的相关的概念，了解了高阶函数的思想后，这篇来带大家学习高阶组件相关的知识。如果没学习上篇的同学，点击下方链接查看精彩内容：
react中高阶函数与高阶组件的运用—（上）（案例详细解释高阶函数）

高阶组件

高阶组件就是一个函数,这个函数接收一个组件作为参数,并返回一个新的组件。高阶组件(HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。

高阶组件例子说明

这里我们还是写一个例子，写成组件的形式来说明，一共有登录，登出，注册三个：
登录：

import React, { Component } from 'react'
export class Login extends Component {
    state = {
        username: ''
    }
    // 模拟使用axios获取useranem，在生命周期中实现
    componentDidMount() {
        const username = 'admin'
        this.setState({username: username})
    }
    render() {
        return (
            <div>
                <h1>Login</h1>
                <p>{this.state.username}登录了</p>
            </div>
        )
    }
}
export default Login

登出和注册的内容跟上面一样，就名字不同，这里我就不贴代码了影响篇幅
可以看到这三个组价都会有重复的部分，比如这里的获取username，那么我们这么避免这些组件里的冗余代码呢？我们需要写一个高阶组件，把相同的部分提取出来。

案例改写

定义username.js文件：
1.定义PropUsername，里面的参数WrapComponent是一个组件
2.里面的state和componentDidMount跟上面的一样，也就是重复代码
3.这里需要返回username给外面用到，所以需要使用props进行传值，也就是返回return < WrapComponent username={this.state.username} />

1. 最后返回这个组件

import React, { Component } from 'react'

function PropUsername(WrapComponent) {
    class NewComponent extends Component {
        state = {username: ''}
        componentDidMount() {
            const username = '超管admin'
            this.setState({username: username})    
        }
        render() {
            return <WrapComponent username={this.state.username} />
        }
    }
    return NewComponent
}

export default PropUsername

上面已经把公共重复的部分写成了高阶组件，那么在其它的地方怎么去使用这个组件呢？

登录页面改写如下（登出和注册与之相同）：
1.上面公共部分写成了高阶组件，利用props进行传值，所以这里使用this.props.username接收值
2.在最后抛出的时候 改写成抛出PropUsername(Login)，将组件login传入进去即可

import React, { Component } from 'react'
import PropUsername from './04username'

export class Login extends Component {
    render() {
        return (
            <div>
                <h1>Login</h1>
                <p>{this.props.username}登录了</p>
            </div>
        )
    }
}

export default PropUsername(Login)

登录鉴权

什么是登录鉴权呢？看下面例子：

class Login extends Component {
    render() {
        return (
            <div>
                <h1>登录页面</h1>
            </div>
        )
    }
}

class Admin extends Component {
    render() {
        return (
            <div>
                <h1>管理员页面</h1>
            </div>
        )
    }
}

假如有登录页面和管理员页面，state中有一个islogin属性，我们需要通过islogin属性来判断展示哪个页面，应该怎么去做呢？大部分人应该想到是用三目表达式去写，如果这里要用高阶组件应该如何去实现？

看如下代码，抽离为高阶组件：
1.定义AuthComponent函数，接收的参数Component为一个组件

1. 定义NewComp，然后通过props来进行判断，从props中拿到 isLogin，为true就返回调用的Component，并把props传进来。如果为false就返回< Login/>
2. 最后再将NewComp返回出去。在外面定义AuthAdmin，讲admin传入AuthComponent函数中

function AuthComponent(Component) {
    const NewComp = (props) => {
        const {isLogin} = props
        // 如果为true展示Admin组件,反之展示Login组件
        if (isLogin) {
            return <Component {...props}/>
        } else {
            return <Login/>
        }
    }
    return NewComp
}
const AuthAdmin = AuthComponent(Admin)

使用上面的高阶函数：
1.直接使用上面定义的AuthAdmin组件，isLogin传入this.state.isLogin的值

class App extends Component {
    state = {isLogin: true}
    render() {
        return (
            <div>
                <h1>主页面</h1>
                <AuthAdmin isLogin={this.state.isLogin}/>
                <button onClick={this.click}>{this.state.isLogin ? '退出' : '请登录'}</button>
            </div>
        )
    }
    click = () => {
        this.setState({isLogin: !this.state.isLogin})
    }
}

export default App

查看效果：

增强props

给每一个prop多传一个属性,一个一个传没有关系,但如果组件过多,一个个传就不太合适了,而且直接给组件添加属性的方式会改变原来的代码结构,我们可以使用高阶组件,对每一个组件在使用之前进行劫持,给每个组件添加一个新的属性。

看如下例子：

import React, { Component } from 'react'

class People extends Component {
    render() {
        return (
            <div>
                <h1>People Page</h1>
                <p>我的名字是：{this.props.name}</p>
                <p>我的年龄是：{this.props.age}</p>
                <p>我的兴趣是：{this.props.inst}</p>
                <p>我的爱好是：{this.props.hobby}</p>
            </div>
        )
    }
}

class Boy extends Component {
    render() {
        return (
            <div>
                <h1>Boy Page</h1>
                <p>我的名字是：{this.props.name}</p>
                <p>我的年龄是：{this.props.age}</p>
                <p>我的兴趣是：{this.props.inst}</p>
                <p>我的爱好是：{this.props.hobby}</p>
            </div>
        )
    }
}
const PropsComponent = (Component) => {
    // 返回一个函数式组件
    const newComponent = (props) => {
        return <Component {...props} inst="打代码" hobby="打游戏" />
    }
    return newComponent
}

const PeopleProps = PropsComponent(People)
const BoyProps = PropsComponent(Boy)

export class App extends Component {
    render() {
        return (
            <div>
                <PeopleProps  name="张三" age="16"/>
                <BoyProps  name="李四" age="12"/>
            </div>
        )
    }
}

export default App

这里直接定义了高阶组件PropsComponent用于展示，把相同的props属性直接写在高阶组价当中：< Component {...props} inst="打代码" hobby="打游戏" />，不同的属性，则可以直接展示在最后的组件中利用props传值实现。

==所以高阶组件进行props增强，可以更加灵活的使用props==

好了本篇文章的内容就到此结束了，本篇主要是通过案例带大家学习了高阶组件的使用，以及在高阶组件中实现登录鉴权和增强props相关的知识，希望能够帮助到你们~
如果对你有帮助，点赞关注支持一下呀~后续会给大家带来更多精彩的内容