什么是react柯里化

在react中，柯里化是一种关于函数的高阶技术，指的是通过函数继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式；柯里化不会调用函数，只是对函数进行转换，通过柯里化在处理表单时，可以轻松的获取表单控件数据。

本教程操作环境：Windows10系统、re***17.0.1版、Dell G3电脑。

什么是react柯里化

函数的柯里化:

通过函数调用继续返回函数的方式,实现多次接受参数最后统一处理的函数编码形式.

扩展：

高阶函数: 若一个函数符合下面两个规范中的一个,该函数就是高阶函数

1.若a函数,接受的参数是一个函数,那么a就可以称为高阶函数

2.若a函数,调用的返回值依旧是一个函数,那么a就可以称之为高阶函数

3.常见的高阶函数有:promise,setTimeout,arr.map等

示例如下;

在form表单中,使用受控组件绑定状态数据，实现点击显示表单数据：

import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { ev***.preventDefault() //阻止表单提交 const {userName, password } = th***state; alert(`${userName}, ${password}`) } updateUserName = (event) => { th***setState({ userName: ev***.target.value, }) } updatePassword = (event) => { th***setState({ password: ev***.target.value, }) } render() { return (

th***submitForm}> 用户名:th***updateUserName}/> 密码: th***updatePassword}/> 登录

) }}

可以看到，这种方法对于表单项多的情况比较繁琐，可以利用函数柯里化来优化：

import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { ev***.preventDefault() //阻止表单提交 const {userName, password } = th***state; alert(`${userName}, ${password}`) } updateFormData = (key) => { return (event) => { th***setState({ [key]: ev***.target.value, }) } } render() { return (

th***submitForm}> 用户名:th***updateFormData('userName')}/> 密码: th***updateFormData('password')}/> 登录

) }}

th***updateFormData()的返回值是一个回调函数，绑定为onChange的事件，参数为event。这样就可以在初次调用时传类型，触发改变事件时传值了。

不使用函数柯里化的实现

直接在onChange事件绑定为回调，可以实现同时传递类型和值两个参数。

import React, {Component} from 'react';export default class Form extends Component{ state = { userName: '', password: '' } submitForm = (event) => { ev***.preventDefault() //阻止表单提交 const {userName, password } = th***state; alert(`${userName}, ${password}`) } updateFormData = (key, event) => { th***setState({ [key]: ev***.target.value, }) } render() { return (

th***submitForm}> 用户名: th***updateFormData('userName', event)}/> 密码: th***updateFormData('password', event)}/> 登录

) }}