React02_函数的柯里化与高阶函数4

2.6 高阶函数_函数柯里化

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

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

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

// 保存表单数据到状态中
saveFormData = (dataType)=>{
    
    
    console.log(dataType);
    // 返回的是一个函数
    return (event)=>{
    
    
        this.setState({
    
    
            // 统一处理 dataType event
            [dataType] : event.target.value
        })
        console.log(dataType,event.target.value);
    }
}

不用函数柯里化的实现

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

    }
    showInfo = (event)=>{
    
    
        // 阻止表单的提交
        event.preventDefault();

        const {
    
    username, password} = this.state;
        alert(`你输入的的用户名是${
      
      username},你输入的密码是${
      
      password} `)

    }
    render (){
    
    
        return (
            <form action="http://www.atguigu.com" onSubmit={
    
    this.showInfo}>
            用户名：<input onChange={
    
    (event)=>{
    
    this.saveFormData('username', event)}} type="text" name="username" />  <br/>
            密码：<input onChange={
    
    (event)=>{
    
    this.saveFormData('password', event)}} type="password" name="password" /> <br/>
           <button>登录</button>
    </form>
    )
 }
}