React高阶函数和函数柯里化

概念

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
通过以下案例引出高价函数以及函数柯里化

用户点击登录之后弹窗中提示用户名和密码:

        class C1 extends React.Component{
            static state={
                username:"",
                password:""
            }
            savePassword=event=>{
                this.setState({password:event.target.value})
            }
            saveUsername=event=>{
                this.setState({username:event.target.value})
            }
            handleSubmit=(event)=>{
                event.preventDefault();
                alert(`用户名：${this.state.username},密码：${this.state.password}`)
            }
            render() {
             return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input type="text" name="username" onChange={this.saveUsername}/>&nbsp;
                密码：<input type="password" name="password" onChange={this.savePassword}/>
                <button>登录</button>
            </form>)   
            }
        }
        ReactDOM.render(<C1/>,document.getElementById("test1"))

上述代码中，我们通过onChange函数分别为用户名和密码绑定保存数据的函数saveUsername和savePassword
优化
当有多个属性需要保存时，比如地址，年龄等，我们就需要分别写saveAddress，saveAge等函数进行保存，所以考虑统一通过函数saveData进行保存，saveData中需要指明dataType，表示需要存储哪种数据，如果将dataType作为参数：

            render() {
             return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input type="text" name="username" onChange={this.saveData("username")}/>&nbsp;
                密码：<input type="password" name="password" onChange={this.saveData("password")}/>
                <button>登录</button>
            </form>)   
            }

以用户名为例，上述代码的含义是：将函数saveData("username")的函数返回值作为参数返回，返回值必须要是一个函数作为onChange的回调才可以实现（即saveData函数的返回值是一个函数，返回的函数作为onChange的回调，此处的saveData就是一个高阶函数）：

        class C1 extends React.Component{
            static state={
                username:"",
                password:""
            }
            saveData=dataType>={
                return
                    (event){
                        this.setState({[dataType]:event.target.value})
                }
            }
            handleSubmit=(event)=>{
                event.preventDefault();
                alert(`用户名：${this.state.username},密码：${this.state.password}`)
            }
            render() {
             return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input type="text" name="username" onChange={this.saveData("username")}/>&nbsp;
                密码：<input type="password" name="password" onChange={this.saveData(password)}/>
                <button>登录</button>
            </form>)   
            }
        }
        ReactDOM.render(<C1/>,document.getElementById("test1"))

在saveData函数中，我们通过函数柯里化的方式分两步分别接收参数dataType和event，通过闭包的方式延长了dataType参数的声明周期，也可以不使用函数柯里化：

		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form 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'))