前言

学习react的同学多多少少对高阶组件有所耳闻，想要学好高阶组件就必须先学好高阶函数的运行，本篇文章就先从高阶函数着手，带大家学习高阶函数和高阶组件的运用

高阶函数

高阶函数（High Order Component）
==JS函数其实都是指向某个变量,既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以去接收另外一个函数作为参数,这种函数就称之为高阶函数。==

// 一个最简单的高阶函数
function add(x, y, f) {
    return f(x) + f(y)
}
add(-5, 5, Math.abs) // 10

==高阶函数至少满足两个条件(满足一个即可)：==
1、接收一个或者多个函数作为输入
2、输出一个函数

高阶函数举例说明

我们先来写一个小例子，定义登录登出的函数：
只是写一个简单的函数，注意看下面的是一般的写法

function login() {
    // usernam一般会从后台接口或者从本地获取
    const username = 'admin'
    console.log(username + '登录了')
}

function logout() {
    const username = 'admin'
    console.log(username + '退出了')
}
login()
logout()

我们可以看到在两个函数中有相同的代码：const username = 'admin'，如何在实际开发中，可能存在更多的相同代码，那么我们就必须要想办法解决这些冗余代码。

下面来进行优化，方法是写一个中间函数来读取这个username，并且把username传递给两个函数：

讲一下下面代码的逻辑：
看最下面定义了newLogin = useUserName(login)，就相当于吧login这个函数作为call传到useUserName里面去，getUserName函数里面的call(username) 就相当于login(username)。logout同理，这里的call是传的一个函数。

function useUserName(call) {
    // call这里是一个函数
    function getUserName() {
        const username = 'admin'
        call(username)
        // login(username)
        // logout(username)
    }
    return getUserName
}

function login(username) {
    console.log(username + '登录了')
}

function logout(username) {
    console.log(username + '退出了')
}
const newLogin = useUserName(login)
const newLogout = useUserName(logout)
newLogin()
newLogout()

上面代码里的useUserName接收了login函数，返回了一个函数，它就是一个高阶函数，它帮我们处理了username，获取了username之后传递给目标函数也就是这里的call。但是最终调用执行的是最后的 newLogin 和 newLogout，作为一个调用者来讲就完全不用关心username是从哪里来，==平常见到的像map/filter/reduce/sort/Array都是高阶函数。== 主要是理解高阶函数的思想。

这一篇给大家介绍了高阶函数，打好基础，了解高阶函数的思想，下一篇给大家带来高阶组件的详细讲解和他的详细用法，点击下面链接查看精彩内容
react中高阶函数与高阶组件的运用—（下）(案例详解登录鉴权与增强props)