前言

学习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)

react中高阶函数与高阶组件的运用—（上）（案例详细解释高阶函数）相关推荐

react - redux 全局状态管理、多组件共享状态 - 例子有详细注释
react全局状态管理基本概念下面开始小例子需要用到的插件redux 代码 - 代码中有详细的注释参考阮一峰的网络日志先来看一下Redux的流程图基本概念 Store: 保存数据的地方, ...
matlab imcrop 对应python函数_Python精讲Numpy基础，大牛笔记详细解释
总认为Numpy是渣渣,直到深入接触以后才知道功能这么强大.堪比Matlab啊.果然是人生苦短,我用Python.所以本文作为一个记录&笔记,文章内容大多数取自网络以&官网快速入门等, ...
如何使用高扩展组件制作APP原型的标签栏？
原型项目中的组件(亦称元件.控件),是指通过基础图层拼装而成,可供用户进行交互或用于展示复杂内容的元素. 在原型设计工作中,组件的使用是非常重要的部分,其不仅关乎项目内容的呈现,更会影响编辑操作效率. ...
史上最全的PHP常用函数大全，不看看你就out了（还会不断更新哦！）
纪录了PHP的一些常用函数和函数代码!不要错过了哦. PHP的一些常用函数 usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基 ...
php函数库快速记忆法_史上最全的php函数大全
定义了一下方法,具体用法可查百度 usleep() 函数延迟代码执行若干微秒. unpack() 函数从二进制字符串对数据进行解包. uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ID ...
matlab amesim 版本,高版本amesim—matlab联合仿真设置详细步骤.pdf
高版本amesim-matlab联合仿真设置详细步骤高版本AMESim-MATLAB 联合仿真设置详细步骤说明:现以AMESimR12 .MATLAB2010a 为例说明,其他版本类似. 1.版本 ...
React 中高阶函数与高阶组件（上）
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
react中高阶组件
react高阶组件深入理解.作用以及应用本文主要以通俗易懂的语言表达自己对高阶组件的一些见解,希望大家多多提问高阶组件深入理解高阶组件就是一个函数,传给它一个组件,它返回一个新的组件.新的组件使 ...
初识react中高阶组件
高阶组件并不是一个组件,而是一个函数这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...

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

前言

高阶函数

高阶函数举例说明

react中高阶函数与高阶组件的运用—（上）（案例详细解释高阶函数）相关推荐

最新文章

热门文章