一、函数柯里化
在使用 React 的时候,有受控组件和非受控组件,在受控组件当中,通过 onChange 的事件来修改组件的状态,一般数量少表单控件可以采用一个控件一个监听函数的方式来编写,但是这种写法会让我们写大量的重复代码,所以我们应该采用函数柯里化的方式来编写
柯里化: 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
如下一个最简单的实例,求和:
function sum(a, b, c) {
return a + b + c;
}
sum(1, 2, 3); // 6
采用函数柯里化的方式来写的话就如下:
function sum(a) {
return (b) => {
return (c) => {
return a + b + c;
};
};
}
sum(1)(2)(3); // 6
二、受控组件当中使用函数柯里化
使用方法如下面代码所示:
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>
);
}
}
三、高阶函数
如果一个函数符合下面 2 个规范中的任何一个,那该函数就是高阶函数。
1、若 A 函数,接收的参数是一个函数,那么 A 就可以称之为高阶函数。
2、若 A 函数,调用的返回值依然是一个函数,那么 A 就可以称之为高阶函数。
常见的高阶函数有:Promise、setTimeout、arr.map()等等
JavaScript 当中的高阶函数使用指南: 高阶函数