React 学习笔记（13）：高阶函数、函数柯里化

1，基础概念

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

1. 若 A 函数，接受的参数是一个函数，那么 A 就可以称之为高阶函数。
2. 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。

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

2，使用高阶函数和函数柯里化优化上一节的例子

上一小节代码的缺点：每一个输入 DOM 都需要绑定一个回调函数，导致需要写多个回调函数，非常的麻烦和多余。

重写的代码如下：

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

		//保存表单数据到状态中
		saveFormData = (dataType)=>{
			return (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={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'))
</script>

优化后的代码要点如下：

1. React 中的事件绑定需要在 { } 中指定事件的回调函数，不能直接执行函数，函数的执行是 React 的行为。
2. 上面的代码，在 { } 中直接执行 saveFormData 函数，参数是需要保存到 state 中的 key，返回值是另外一个函数，这个函数才是绑定给 onChange 的回调函数。在这个函数中，可以获取到 dataType 和 event，借助这两个数据，我们写一个通用的函数就可以适配所有的 input 输入框。

3，不用函数柯里化的实现

还有一种写法，也很方便，代码如下：

<script type="text/babel">
	//创建组件
	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'))
</script>

代码要点如下：

直接在 { } 中写一个箭头函数作为 onChange 的回调函数，这个箭头函数的参数是 onChange 的事件对象，在箭头函数中直接执行 saveFormData 函数，参数是 dataType 和 event，saveFormData 函数拥有了这两个参数，就可以适配所有的 input 框了。