一.高阶函数
如果一个函数符合下面2个规范中的任意一个,那么该函数就是高阶函数
- 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
- 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
常见的高阶函数有:Promise, setTimeout, arr.map()等等
事例为受控组件的例子,因表单提交的事件回调可以统一放在一个函数中,所以采用高阶函数的方式
class Login extends React.Component{
state = {
username:'',
password:'',
}
// 高阶函数、函数柯里化
saveFormData = (dataType) => {
return (event) => {
this.setState({[dataType]:event.target.value})
}
}
handleSubmit = (event) => {
event.preventDefault()
const {username,password} = this.state
alert(username,password)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveFormData('username')} type="text" name="username" />
密码:<input onChange={this.saveFormData('password')} type="password" name="password" />
<button>登陆</button>
</form>
)
}
}
onChange必须要回调一个函数,在本案例中,是将this.saveFormData('username')
的返回值作为了onchange的回调,所以此返回值必须是函数。
二.函数的柯里化
通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码方式
举例
普通写法
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)
三.不用函数柯里化的实现
class Login extends React.Component{
state = {
username:'',
password:'',
}
// 不使用函数柯里化的方式
saveFormData = (dataType,event) => {
this.setState({[dataType]:event.target.value})
}
handleSubmit = (event) => {
event.preventDefault()
const {username,password} = this.state
alert(username,password)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={(event) => {this.saveFormData('username',event)}} type="text" name="username" />
密码:<input onChange={(event) => {this.saveFormData('password',event)}} type="password" name="password" />
<button>登陆</button>
</form>
)
}
}