函数柯里化--高阶函数的实现

函数柯里化定义：通过函数调用函数并且继续返回函数的方式，实现多次接收函数，最后统一处理的

函数编码信息。

高阶函数：

如果一个函数符合以下规范任意一个，就是高阶函数

• 若a函数，接收的参数是一个函数，那么a函数就是一个高阶函数

• 若a函数，调用的返回值依然是一个函数，那么a就是一个高阶函数

完整代码实例 ⬇️

 class Demo extends React.Component{
       //初始化数据
        state={
            username:"",
            password:""
        }

        login=(event)=>{
            event.preventDefault()
            let {username,password}=this.state
            alert( `输入用户名为：${username},密码为${password}`)
        }
        /**
         函数柯里化
            通过函数调用继续返回函数的方式，实现多次接收参数，最后统一处理的函数编码形式。
         高阶函数：
            1.若a函数接收的参数是一个函数，那么a就是可以称之为高阶函数
            2.若a函数，调用的返回值依然是一个函数 那么a就是高阶函数
          实现了两种
        */
        changeFormData=(dataType)=>{   //执行箭头函数
          return (event)=>{  //返回一个箭头函数
            this.setState({
                [dataType]:event.target.value 
            })
          }
            
    }
    changePassword=(event)=>{ //普通箭头函数接收事件
            this.setState({
                password:event.target.value 
            })
        }
   
       render(){
           return (
                <form  onSubmit={this.login}>
                //react事件绑定接收一个函数其内部处理自己调用this.changeFormData('username')方法 
                   用户名： <input onChange={this.changeFormData('username')} type="text"  name="username"/>
                   密码： <input onChange={this.changeFormData('password')} type="password" name="password" />
                   <button >登陆</button>
                </form>
           )
       }
   }
        ReactDOM.render(<Demo />, document.getElementById("test")); // {/* // 渲染虚拟DOM到页面展示 /* */}

• 不使用函数柯里化绑定事件

事件绑定直接定义一个对象onChange={event=>this.changeFormData(event,'username')}

 <form  onSubmit={this.login}>
                   用户名： <input onChange={event=>this.changeFormData(event,'username')} type="text"  name="username"/>
                   密码： <input onChange={event=>this.changeFormData(event,'password')} type="password" name="password" />
                   <button >登陆</button>
  </form>

函数直接接收

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