高阶函数

先说一下高阶函数的定义：
满足以下两个条件中的任意一个都是高阶函数：
A 若A函数接收的参数是一个函数，那么A可以称之为高阶函数
B 若A函数，调用的返回值是一个函数，那么A可以称之为高阶函数
常见的高阶函数：Promise、setTimeout()、arr.map()等等
为什么会引出高阶函数这个概念呢？我们前文写了一个简单的受控组件

class HighFunc extends React.Component {

  state = {
    username: '',
    password: ''
  }

  saveUsername = (event) => {
    this.setState({username: event.target.value})
  }
  savePassword = (event) => {
    this.setState({password: event.target.value})
  }

  handleSumbit = () => {
    const {username,password} = this.state;
    alert(`your username ${username} and password ${password}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSumbit}>
        用户名：<input onChange={this.saveUsername} type="username" name="username"/>
        密码：<input onChange={this.savePassword} type="password" name="password"/>
        <button>登录</button>
      </form>
    )
  }
}
ReactDOM.render(<HighFunc />,document.getElementById('app'));

简单来说就是一个包括用户名和密码的登录简易界面，当然我们只是最后获取了用户的输入内容而已，我们是将其值存入了state中，这样的写法有点类似于vue中的双向绑定，高阶函数的引入就是这个地方，我们定义了两个函数来将输入框中的内容存入state中，那如果我们有一个注册页面的话岂不是我们会有多个函数来执行这个操作，这个时候就可以考虑实现高阶函数。
我们观察上述的两个存入值的函数发现其实只是存入state的key值不同，那有没有什么办法只用一个函数，但可以来区分不同的key呢？（毕竟我们想简化本质上就是希望不要有那么多的函数来做相似的处理过程），我们来区分不同的key的话，很容易想到的就是使用参数来进行区分，但是怎么传参呢？在react中我们引入的参数都是不带括号的形式，因为带了括号本质上是说这个函数执行了，没有返回值的情况下返回的是undefined，比如我们的代码onChange={this.saveXXXFunc('username')}我们确实通过参数来区分这个是用户名输入框的数据的存储，但是这个函数执行之后返回的是一个undefined，换句话说就是我们给onChange绑定了一个undefined，这很明显在随后的操作中不会产生我们预期中的结果~
那怎么办呢？返回一个函数不就好了，毕竟onChange绑定的是一个函数。

 saveFormData = (dataType) => {
    return (event) => {
      this.setState({[dataType]: event.target.value})
    }
  }

首先我们得dataType自然就是我们用来区分的函数，那么我们每一个标签的value其实是跟着saveFormData的返回值函数中进行的，所以event在返回的函数的参数位置，最后是[dataType]的写法，因为我们直接写dataType是不能在{}被解析的，类似于我们obj[xxx]=XXX的写法，通过这样的方式使得在{}中可以被解析

class HighFunc extends React.Component {

  state = {
    username: '',
    password: ''
  }

  saveFormData = (dataType) => {
    return (event) => {
      this.setState({[dataType]: event.target.value})
    }
  }

  handleSumbit = () => {
    const { username, password } = this.state;
    alert(`your username ${username} and password ${password}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSumbit}>
        用户名：<input onChange={this.saveFormData('username')} type="username" name="username" />
        密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
        <button>登录</button>
      </form>
    )
  }
}
ReactDOM.render(<HighFunc />, document.getElementById('app'));