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 个规范中的任何一个,那该函数就是高阶函数。

  1. 若 A 函数,接收的参数是一个函数,那么 A 就可以称之为高阶函数;
  2. 若 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 调用。

总结

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

相关推荐
河畔一角6 分钟前
一些感悟
前端
excel12 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子41 分钟前
Webpack 5模块联邦
前端·javascript·面试
前端双越老师42 分钟前
为何前端圈现在不关注源码了?
面试·前端框架·源码
玲小珑44 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端