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