在react中，柯里化是一种关于函数的高阶技术，指的是通过函数继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式；柯里化不会调用函数，只是对函数进行转换，通过柯里化在处理表单时，可以轻松的获取表单控件数据。
本教程操作环境：windows10系统、react17.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) => { event.preventdefault() //阻止表单提交 const {username, password } = this.state; alert(`${username}, ${password}`) } updateusername = (event) => { this.setstate({ username: event.target.value, }) } updatepassword = (event) => { this.setstate({ password: event.target.value, }) } render() { return ( <form onsubmit={this.submitform}> 用户名:<input type="text" name="username" onchange={this.updateusername}/> 密码: <input type="password" name="password" onchange={this.updatepassword}/> <button>登录</button> </form> ) }}
可以看到，这种方法对于表单项多的情况比较繁琐，可以利用函数柯里化来优化：
import react, {component} from 'react';export default class form extends component{ state = { username: '', password: '' } submitform = (event) => { event.preventdefault() //阻止表单提交 const {username, password } = this.state; alert(`${username}, ${password}`) } updateformdata = (key) => { return (event) => { this.setstate({ [key]: event.target.value, }) } } render() { return ( <form onsubmit={this.submitform}> 用户名:<input type="text" name="username" onchange={this.updateformdata('username')}/> 密码: <input type="password" name="password" onchange={this.updateformdata('password')}/> <button>登录</button> </form> ) }}
this.updateformdata()的返回值是一个回调函数，绑定为onchange的事件，参数为event。这样就可以在初次调用时传类型，触发改变事件时传值了。
不使用函数柯里化的实现
直接在onchange事件绑定为回调，可以实现同时传递类型和值两个参数。
import react, {component} from 'react';export default class form extends component{ state = { username: '', password: '' } submitform = (event) => { event.preventdefault() //阻止表单提交 const {username, password } = this.state; alert(`${username}, ${password}`) } updateformdata = (key, event) => { this.setstate({ [key]: event.target.value, }) } render() { return ( <form onsubmit={this.submitform}> 用户名:<input type="text" name="username" onchange={(event) => this.updateformdata('username', event)}/> 密码: <input type="password" name="password" onchange={(event) => this.updateformdata('password', event)}/> <button>登录</button> </form> ) }}
【相关推荐：javascript视频教程、web前端】
以上就是什么是react柯里化的详细内容。