此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第九篇，主要介绍高阶函数与函数柯里化。
高阶函数，和函数的柯里化，是学习react的拓展，方便以后优化代码，更好的学习react。
目录
高阶函数
案例
高阶函数定义
函数的柯里化
函数柯里化的定义
柯里化小案例
不用柯里化的写法
高阶函数
案例
先把上一笔记里面的案例，拿出来：这个案例就是，两个输入框分别是用户名和密码，输入用户名和密码，点击登录按钮，会弹出一个提示框，显示你输入的用户名和密码。
如代码所示，表单中需要获取用户名和密码，并且加以操作，所以有了对应的两个方法：saveUsername和savePassword。但如果还存在性别，年龄，电话号码等等信息需要操作，是不是得一一对应，写很多方法？实在是过于冗余，有没有什么解决的办法？
所以我们只写一个方法saveFormData来代替saveUsername和savePassword，来给表单中所有的属性使用：
用户名：
密码：
saveFormData = (event)=>{
this.setState({
password:event.target.value
})
}
但是，这会出现很大的错误。注意onchange的回调函数，它非是一个函数进行了回调，而是一个函数的返回结果进行了回调：this.saveFormData("username")，saveFormData加了小括号，已经在回调时执行完了，产生了函数的返回值，这个返回值参与了回调，就会发生错误。
必须将一个函数返回给onchange作为回调。
如下的写法，才是onchange事件触发时候，回调saveFormData这个函数。
而且这个saveFromData函数，this.setState也会一直把数据给password。我们接下来修改这些错误。
那么怎么才能在加（）的情况下，也能正确执行回调函数呢。众所周知函数加了（）就是执行函数产生返回值，那么我们直接让返回值是一个函数不就行了。
改写这个saveFromData函数：
//保存表单数据到状态中
saveFormData = (dataType) => {
return (event) => {
this.setState({
[dataType]: event.target.value
})
}
}
我们将saveFromData函数的返回值，写成了一个函数。如此一来，onchange事件触发后，回调saveFromData函数的返回值，仍然是一个函数，便能达到正常的效果。
我们在onChange={this.saveFormData("username")}中传入参数，在saveFromData函数设置形参dataType接收这个参数，在this.setState中以中括号包裹形参（中括号表示其中是是一个变量，不写中括号会当作一个键名），设置state，这样就可以区分数据，在state中分开保存不同的数据。
来看效果：
高阶函数定义
高阶函数：如果一个函数符合下面两个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以被称为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以被称为高阶函数。
由此可见：saveFromData函数就是一个高阶函数，调用的返回值是一个函数。
常见的高阶函数，如promise，数组迭代的那几种方法，定时器。
函数的柯里化
函数柯里化的定义
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
柯里化小案例
为了理解柯里化，我们先正常的写一个普通函数的案例：a,b,c 的求和
function sum(a,b,c){
return a+b+c
}
const result = sum(1,2,3)
console.log(result);
现在把上面的案例，改成柯里化的写法：
function sum(a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result = sum(1)(2)(3)
console.log(result);
这个案例里面的函数柯里化，看似把简单的问题复杂化，变得麻烦，又有些回调地狱的风格。但实际应用上，函数柯里化经常使用。比如说第一个案例，里面的saveFromData函数：
saveFormData = (dataType) => {
return (event) => {
this.setState({
[dataType]: event.target.value
})
}
}
先接收了参数dataType，然后再接收了event参数，在后面对两个参数统一处理了，这就是函数的柯里化。
不用柯里化的写法
如果我们不用柯里化的写法，这就要求我们一次性拿到所有参数。主要是在onchange事件里，想办法把两个参数一次性给saveFromData函数传过去。
给onchange事件回调的，必须是一个函数。我们尝试写一个内联函数，这样既能在内联函数中把参数传递给saveFromData函数，又可以保证是一个函数回调给事件。
如下：onChange={(event)=>{this.saveFormData('username',event.target.value)}}
用户名：{this.saveFormData('username',event)}} type="text" name="username" />
密码：{this.saveFormData('password',event)}} type="password" name="password" />
然后我们就可以把saveFromData函数改写成一个普通的函数：
saveFormData = (dataType, event) => {
this.setState({
[dataType]: event.target.value
})
}
如此，我们改写了这两个部分，就可以把柯里化写法，改成普通的函数写法。
参考阅读
您阅读本篇文章共花了：
发表评论