react中高阶函数与高阶组件的运用—（下）(案例详解登录鉴权与增强props)

前言

上篇文章给大家介绍了高阶函数的相关的概念，了解了高阶函数的思想后，这篇来带大家学习高阶组件相关的知识。如果没学习上篇的同学，点击下方链接查看精彩内容：
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} />
4. 最后返回这个组件

import React, {
    Component } from 'react'

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