什么是react柯里化

130 阅读 0 评论 86 点赞

我是靠谱客的博主开朗白羊，这篇文章主要介绍什么是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>
    )
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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>
    )
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
    )
  }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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>
    )
  }
}
登录后复制