【React】第五部分 高阶函数和函数的柯里化

【React】第五部分 高阶函数和函数的柯里化

---

---

5. 高阶函数和函数的柯里化

什么是高阶函数?

如果一个函数符合下面两种规范的其中一种,那么它就是高阶函数

(1) 函数A , 接收的参数是一个函数 , 例如:定时器、promise

(2) 函数A , 返回值是一个函数

什么是柯里化?

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

举个例子更好的认识柯里化

function sum (a){
	return (b)=>{
		return (c)=>{
			return a+b+c
		}
	}
}

sum(1)(2)(3)

下面做一个案例，输入用户名、密码和验证码，弹窗显示用户信息

  class Login extends React.Component{
            render(){
                return (
                    <form onSubmit={this.handleForm}>
                        用户名：<input onChange={this.saveForm('username')} type="text"/> <br/>
                        密码：<input onChange={this.saveForm('password')} type="password"/> <br/>
                        验证码：<input onChange={this.saveForm('code')} type="text"/> <br/>
                        <button>登录</button>
                    </form>
                )
            }
			// 初始化数据
            state = {
                username:'',
                password:'',
                code:''
            }
			// 提交事件
            handleForm = () =>{
                const {username,password,code}  = this.state
                alert(`用户名：${username} --- 密码：${password} --- 验证码：${code}`)
            }
			// 更新state中的数据
            saveForm = (type) =>{
                // 注意这里和之前的不一样，在上述结构中是将该函数的返回值交给onChange
                // 当数据发生变化的时候onChange实际是调用返回的函数
                // 这个函数就是高阶函数并且满足函数的柯里化
                return (e) =>{
                    this.setState({[type]:e.target.value})
                }
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('box'))

那么如果不用函数的柯里化怎么实现上述功能呢？

class Login extends React.Component{
            render(){
                return (
                    <form onSubmit={this.handleForm}>
                        用户名：<input onChange={event=>this.saveForm('username',event)} type="text"/> <br/>
                        密码：<input onChange={event=>this.saveForm('password',event)} type="password"/> <br/>
                        验证码：<input onChange={event=>this.saveForm('code',event))} type="text"/> <br/>
                        <button>登录</button>
                    </form>
                )
            }
						// 初始化数据
            state = {
                username:'',
                password:'',
                code:''
            }
						// 提交事件
            handleForm = () =>{
                const {username,password,code}  = this.state
                alert(`用户名：${username} --- 密码：${password} --- 验证码：${code}`)
            }
						// 更新state中的数据
            saveForm = (type,e) =>{
                this.setState({[type]:e.target.value})
            }
        }

        ReactDOM.render(<Login/>,document.getElementById('box'))

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！