React-高阶函数_函数柯里化

Z时代
2024-01-10
分类：综合

react

高阶函数_函数柯里化

高阶函数（定义）

如果一个函数符合下面两个规范，就是高阶函数：
如果A函数，接收的参数是一个函数，那么A就是一个高阶函数（比如数组方法arr.map()接收的就是一个处理item的函数了）
如果A函数，调用的返回值依然是一个函数，那么A也称为是高阶函数（常见的高阶函数：Promise、setTimeout、arr.map（）等等数组内置的方法）

函数柯里化（定义）

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
(有点像回调地狱的感觉，就是一直then)

一个柯里化的例子：

class Login extends React.Component {
            state = {
                username: '',
                password: ''
            }
            saveFormData = (dataType) => {
                console.log(dataType);
                return event => {
                    this.setState({[dataType] : event.target.value})
                }
            }
            render() {
                return (
                    <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                       用户名：<input onChange={this.saveFormData('username')}  type="text" name="username"/>    
                      密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
                        <button>登录</button>    
                    </form>
                )
            }
        }

例子疑问一：

为什么通过 this.saveFormData('username') 这样不是会把返回值给onChange函数吗？

回答：如果saveFormData（）函数返回的是一个函数的话就可以

解释：

因为this.saveFormData('username')，把‘username’传递作为saveFormData的形参dataType

返回给onChange的函数相当于

onChange={ event => { this.setState({[username] : event.target.value}) } }

所以这个event其实就是这个input的元素对象了

例子疑问二：

为什么用{[dataType] : event.target.value}

解释：

假如我们写的是dataType : event.target.value，其实就相当于是给this.state.dataType赋值了，但是dataType它要表示的是username或者是password，而不是dataType这个变量

比如说 obj = { a: 2} ，可以通过obj.a获取，也可以通过obj[a]获取
而下面其实省略了一点东西，完整的是 this[dataType]，因为我们把dataType通过参数传递进来了
它是this的一个属性了，我们访问dataType的时候，其实默认的是通过this.dataType也就是通过
this当前作用域来找到对应的变量的

因为dataType是我们传递过来的形式参数，所以通过this.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 action="http://www.atguigu.com" 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>
                )
            }
        }