react: 高阶函数及函数柯里化

本文主要是介绍react: 高阶函数及函数柯里化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.高阶函数

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

2. 函数的柯里化

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

2.1 示例

下面表单中的所有属性的保存都通过一个saveFormData 即可实现
saveFormData接收一个参数,并返回了一个函数,这个返回的函数作为onChange事件的回调函数
回调函数参数又是事件发生的元素节点
这样就能同时获取到需要保存的属性名,通过事件发生的元素节点获取对应的value
达到保存表单数据的效果

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'))

这篇关于react: 高阶函数及函数柯里化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！