React - 高阶函数-函数柯里化

在 JavaScript 和 React 中，高阶函数是指能够接收其它函数作为参数，或者返回一个函数的函数。柯里化是一种将函数的多个参数转化为一系列嵌套函数的技术，通常用于简化函数的使用和提高其可组合性。

使用前：

javascript 复制代码

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()等

javascript 复制代码

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. 变量作为属性名

当知道属性名 在运行时是动态变化的（例如在循环中、条件判断中或处理用户输入时），可以将变量作为属性名来访问或修改对象的属性。

javascript 复制代码

const fieldName = 'username';
const user = {
    username: 'john_doe',
    password: '123456'
};

// 使用方括号语法动态访问
console.log(user[fieldName]); // 输出: john_doe

2. 使用表达式

方括号语法允许使用表达式来计算属性名。例如，可以根据某些条件来决定要访问的属性。

javascript 复制代码

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. 在对象字面量中动态创建属性名

在对象字面量中，也可以使用方括号语法来动态地为对象创建属性名。这使得可以在对象初始化时动态设置属性。

javascript 复制代码

const key = 'xx';
const value = 'blue';

// 使用方括号语法来创建带有动态键名的对象
const obj = {
    [key]: value
};

console.log(obj.xx); // 输出: blue

4. 在 React 中状态管理

在 React 中，在更新 state 时，使用方括号语法来动态设置键名是非常常见的，特别是在根据输入框等动态生成的字段名来更新状态时。

javascript 复制代码

this.setState({ [dataType]: event.target.value });

在这个例子中，++dataType 可能是 'username' 或 'password'++ ，使用方括号语法允许灵活地根据不同键名更新状态，而不需要写多个 setState 调用。

总结

使用**方括号语法 []**的主要原因是能够使用变量或表达式动态访问或设置对象的属性。它使得代码更加灵活和可读，能够处理许多情况，例如动态状态管理、条件逻辑和其他基于用户输入的场景。