在 JavaScript 和 React 中，高阶函数是指能够接收其它函数作为参数，或者返回一个函数的函数。柯里化是一种将函数的多个参数转化为一系列嵌套函数的技术，通常用于简化函数的使用和提高其可组合性。
使用前：
import React,{Component} from "react";
export default class Sum extends Component{
// 初始化状态
state = {
username: '',// 账号
password:'',// 密码
}
// 保存账号
saveUsername = (event) => {
const {target} = event
this.setState({username:target.value})
}
// 保存密码
savePassword = (event) => {
const {target} = event
this.setState({password:target.value})
}
// 表单提交的回调
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交默认行为
const { username, password } = this.state
console.log(username,password);
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
账号：<input onChange={this.saveUsername} type="text" name="username" />
密码：<input onChange={this.savePassword} type="password" name="password" />
<button>登录</button>
</form>
</div>
)
}
}
高阶函数写法：
高阶函数：若一个函数符合下面 2 个规范中的任何一个，那该函数就是高阶函数。
- 若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数；
- 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。
常见的高阶函数有：Promise，setTimeout，arr.map()等
import React,{Component} from "react";
export default class Sum extends Component{
// 初始化状态
state = {
username: '',// 账号
password:'',// 密码
}
// 保存账号 密码 到状态中
saveFormData = (dataType) => {
return (event) => {
this.setState({[dataType]:event.target.value})
console.log(dataType,event.target.value);
}
}
// 表单提交的回调
handleSubmit = (event) => {
event.preventDefault() // 阻止表单提交默认行为
const { username, password } = this.state
console.log(username,password);
}
render() {
return (
<div>
<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>
</div>
)
}
}
函数柯里化：
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
补充：方括号语法 [ ]
在 JavaScript 中，方括号语法 [] 用于动态地访问或设置对象属性的值。这种语法允许使用变量或表达式作为属性名，而不是只使用静态字符串。这在处理动态属性名时尤其有用。
1. 变量作为属性名
当知道属性名在运行时是动态变化的（例如在循环中、条件判断中或处理用户输入时），可以将变量作为属性名来访问或修改对象的属性。
const fieldName = 'username';
const user = {
username: 'john_doe',
password: '123456'
};
// 使用方括号语法动态访问
console.log(user[fieldName]); // 输出: john_doe
2. 使用表达式
方括号语法允许使用表达式来计算属性名。例如，可以根据某些条件来决定要访问的属性。
const prefix = 'user_';
const user = {
user_name: 'john_doe',
user_age: 30
};
// 使用表达式
console.log(user[prefix + 'name']); // 输出: john_doe
console.log(user[prefix + 'age']); // 输出: 30
3. 在对象字面量中动态创建属性名
在对象字面量中，也可以使用方括号语法来动态地为对象创建属性名。这使得可以在对象初始化时动态设置属性。
const key = 'xx';
const value = 'blue';
// 使用方括号语法来创建带有动态键名的对象
const obj = {
[key]: value
};
console.log(obj.xx); // 输出: blue
4. 在 React 中状态管理
在 React 中，在更新 state 时，使用方括号语法来动态设置键名是非常常见的，特别是在根据输入框等动态生成的字段名来更新状态时。
this.setState({ [dataType]: event.target.value });
在这个例子中，dataType 可能是 'username' 或 'password'，使用方括号语法允许灵活地根据不同键名更新状态，而不需要写多个 setState 调用。
总结
使用方括号语法 [] 的主要原因是能够使用变量或表达式动态访问或设置对象的属性。它使得代码更加灵活和可读，能够处理许多情况，例如动态状态管理、条件逻辑和其他基于用户输入的场景。