React中的高阶函数柯里化

前言

我们在开发的过程总会遇到一种事情，而且很多次。我们来看一下这个例子：

import React, { ChangeEvent, Component, FormEvent } from "react";

export default class example1 extends Component {
  state: Readonly<{ username: string; password: string }> = {
    username: "", //用户名
    password: "", //密码
  };
  handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { username, password } = this.state;
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
  };
  
  //保存用户名到状态中
  saveUsername = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({ username: event.target.value });
  };

  //保存密码到状态中
  savePassword = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({ password: event.target.value });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名：
        <input onChange={this.saveUsername} type="text" name="username" />
        密码：
        <input onChange={this.savePassword} type="password" name="password" />
        <button>登录</button>
      </form>
    );
  }
}

可以看到我们上面的onChange事件写了两次，一次是为用户名的，一次是为密码的。现在还好只有两个，但是我们要是有10个呢？难道我们就要写10次onChange？光是想命名就很难受了

所以我们就有了下面的这两种方法

使用高阶函数柯里化去实现

什么是高阶函数？

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

• 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
• 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
• 常见的高阶函数有：Promise、setTimeout、arr.map()等等

什么是函数柯里化呢？

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。例如下面这个例子一样：

function sum(a){
	return(b)=>{
		return (c)=>{
			return a+b+c
		}
	}
}

竟然认识到了高阶函数和函数的柯里化的话，那让我们来改善一下吧

import React, { ChangeEvent, Component, FormEvent } from "react";

export default class example1 extends Component {
  state: Readonly<{ username: string; password: string }> = {
    username: "", //用户名
    password: "", //密码
  };
  handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { username, password } = this.state;
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
  };
  
  //保存表单数据到状态中
  saveFormData = (dataType: string)=>{
    return (event:ChangeEvent<HTMLInputElement>)=>{
      this.setState({[dataType]:event.target.value})
    }
  }

  render() {
    return (
      <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>
    );
  }
}

这样我们的onChange事件就写一次就可以完成了，是不是方便很多呢。有人说我不会高阶函数柯里化的写法，有没有别的，当然有的。

不使用函数柯里化实现

import React, { ChangeEvent, Component, FormEvent } from "react";

export default class example1 extends Component {
  state: Readonly<{ username: string; password: string }> = {
    username: "", //用户名
    password: "", //密码
  };
  handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const { username, password } = this.state;
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`);
  };

  //保存表单数据到状态中
  saveFormData = (dataType: string, event: ChangeEvent<HTMLInputElement>) => {
    this.setState({ [dataType]: event.target.value });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名：
        <input onChange={(event) => this.saveFormData("username", event)} type="text" name="username" />
        密码：
        <input onChange={(event) => this.saveFormData("password", event)} type="password" name="password" />
        <button>登录</button>
      </form>
    );
  }
}

这种就是常规的写法，写个回调然后里面有个函数，通过传入类型和值，去修改相应的state，这个也还是个高阶函数，但是没有了柯里化了。

总结

噢耶，今天并没有详细的去讲高阶函数和函数的柯里化，其实高阶函数还有其他的很多作用，其实我们在开发中也有用到了，但是你不知道那个就是高阶函数了。

拓展

• 高阶函数，你怎么那么漂亮呢！