0
点赞
收藏
分享

微信扫一扫

react中高阶函数与高阶组件的运用—(上)(案例详细解释高阶函数)

兮城 2022-03-18 阅读 61

前言

学习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都是高阶函数。 主要是理解高阶函数的思想。

这一篇给大家介绍了高阶函数,打好基础,了解高阶函数的思想,下一篇给大家带来高阶组件的详细讲解和他的详细用法,敬请期待

举报

相关推荐

0 条评论