高阶函数和函数的柯里化

一、高阶函数

定义：

如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数：
- 1、若 A 函数，接受的参数是一个函数，那么 A 就可以称为高阶函数。
- 2、若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map() 等。

二、函数的柯里化

通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式，叫做函数的柯里化。

function sum (a,b,c) {
  return a+b+c
}
let result = sum(1,2,3)
console.log("普通函数：",result)

// 函数柯里化
function sum2(a) {
  return (b) => {
    return (c) => {
      return a + b + c
    }
  }
}
let result2 = sum2(1)(2)(3)
console.log("函数柯里化：", result2)

三、综合案例

在这里插入图片描述

<body>
  <div id="test"></div>
  
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
    class Login extends React.Component {
      state = {
        username: "",
        password: ""
      }
      // 符合高阶函数第2条的定义，所以 saveFormData 函数叫做高阶函数
      // 符合函数柯里化的定义，所以 saveFormData 函数也叫函数的柯里化
      saveFormData = (dateType) => {
        return (event) => {
          this.setState({ [dateType]: event.target.value })
        }
      }
      confitm = (event) => {
        event.preventDefault();
        const { username, password } = this.state;
        alert(`你输入的用户名是${username}，密码是${password}`)
      }
      render() {
        return (
          <div>
            <form action="" onSubmit={this.confitm}>
              用户名：<input onChange={this.saveFormData("username")} type="text" name="user"/>
              密码：<input onChange={this.saveFormData("password")} type="password" name="password" />
              <button>登录</button>
            </form>
          </div>
        )
      }
    }
    ReactDOM.render(<Login/>, document.getElementById("test"))
  </script>
</body>