React高阶函数—函数柯里化

React高阶函数和函数柯里化

高阶函数：
1.若A函数接收的参数是一个函数，则A函数为高阶函数。
2.若A函数调用的返回值是一个函数，则A函数为高阶函数。
常见的高阶函数：promise，settimeout，arr.map()。。。

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

class Login extends React.Component{
      //初始化状态
      state = {
            username:'',
            password:'',
      }
      
      //保存表单数据到状态中
      saveFormData = (dataType) =>{
            console.log(dataType);
            return (event)=>{
                  console.log(dataType,event.target.value);
                  this.setState({ [dataType] : event.target.value })
            }
      }

      handleSubmit = (event) =>{
            event.preventDafault();      //阻止表单提交
            const {username,password} = this.state
            console.log(username,password);
      }

      render(){
            return(
                  <form action="#" onSubmit={this.handleSubmit} >
                          用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
                          密码：<input onChange={this.saveFormData('password') type="password" name="password" />
                          <button >登录</button>
                  </form>
            )
      }
}
ReactDom.render(<Login/>,document.getElementById('test'))

不用高阶函数和函数柯里化

class Login extends React.Component{
      //初始化状态
      state = {
            username:'',
            password:'',
      }
      
      //保存表单数据到状态中
      saveFormData = (dataType,value) =>{
                  this.setState({ [dataType] : value.target.value })
      }

      handleSubmit = (event) =>{
            event.preventDafault();      //阻止表单提交
            const {username,password} = this.state
            console.log(username,password);
      }

      render(){
            return(
                  <form action="#" 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>
            )
      }
}
ReactDom.render(<Login/>,document.getElementById('test'))