今天看到高阶函数的概念,突然就迷不过来了,这个高阶函数和回调有什么区别呢?
高阶函数英文叫Higher-order function。那么什么是高阶函数?
刚开始学习语言我最害怕看到这种XX函数的,一看到就想跳过,结果跳过了发现后面好多知识点都无法理解。 我们完全没必要把它想的多么高深,其实高阶函数你在学习到这个阶段的时候已经使用过很多高阶函数了,只不过你之前不知道它们还有这个特殊的称呼。 最简单的例子就是
setTimeout(fn,delay)
一个函数A接收另外一个函数B作为参数,那么这个函数A就叫做高阶函数,fn就叫做setTimeout的回调函数。 记住一点,高阶函数和回调函数的概念是两个函数相互搭配使用,才能叫做高阶函数和或者某某函数的回调函数的。单独的一个函数fn是无法叫做高阶函数的!
回调函数的概念我写过一篇博客,如有需要,可以翻看我的个人文章,内容没有专业名词,简单易懂。
函数还有一个方式也可以成为高阶函数,那就是返回值也是一个函数。如果你了解过防抖和节流,你可能一下子就会明白这个使用方法。下面例子与防抖节流无关。 到这里你就已经可以分清楚什么是高阶函数和回调函数了。
分割线,以下是这个概念自己写的进阶笔记,写的比较绕,初学者可能看不懂代码,请选择观看。
<------------------------------------------------------>
这是我写的一段代码,我想实现的功能是当我鼠标移动到li标签里时候,出现删除的按钮。
逻辑是我需要判断li标签的id是否和它的索引相同,然后把button的opacity改变。这里使用的是
因为我需要传递参数数组的id值,给onMouseEnter这个函数的回调函数也就是handleMOuse,但是我们需要搞清楚的是下面写法的原因👇为什么要这样写。
不管是onClick和OnChange等这些事件,都需要一个函数作为它的回调来使用,注意!这些事件需要你给它提供一个函数
onMouseEnter={handleMouse(iterm.id)}
当你这样写的时候,你需要明白,浏览器调用render()函数的时候,你的handleMouse是函数名,但是一旦你带括号,就说明你在执行它!!!!这个概念非常重要,需要理清楚。所以走到这一行会执行这个函数, 但是如果这时候你这个函数的返回值为空或者不为函数,那么就不会得到你想要的结果,那么我们的目的就是让浏览器先执行一个函数A(目的是拿到参数),然后让函数A再返回一个函数B,这时候函数B才是触发这个具体事件的函数。
很绕,需要多多理解。
上面代码的意思是,当浏览器调用render方法的时候,会首先执行
这段代码,然而这段代码函数A的作用只是把我们需要的参数传递进去,真正意义上的函数是这个函数A的返回值
这里的e才是 onMOuseEnter事件对象。至此我们拿到了我们需要对比的参数并且进行逻辑判断。
高阶组件
有什么用呢?包装组件把被包装组件加工以后,返回一个新的组件。
可以看作 包装组件是被包装组件的父组件,那么就会给 被包装组件一个props属性