react学习---day04--高阶函数与函数柯里化

需求: 还是那个登录功能,但是我现在不想一直执行e.target.value这句代码,假设我有十个输入框那我就需要写十句这样的代码

可以将saveUserName与savePassWord写成一个方法,只需要将他们的标识作为一个参数传入进去

<input onChange={this.savaFormData("userName")} type="text" placeholder="用户名" />
<input onChange={this.savaFormData("passWord")} type="text" placeholder="密码" />
<button onClick={this.login}>登录</button>

这样在savaFormData方法里面就可以分辨出谁是userName谁是passWord

savaFormData = (type) => {

}

但是有一个问题,直接这样写的话是拿不到input的value的

react底层处理表达式是直接执行且携带参数的(this.savaFormData(userName))是不能直接拿到event的,

因为在底层是将this.savaFormData(userName)方法的返回值绑定在了onChange里面,也就是说如果是直接执行且携带参数的只有在返回值中可以拿到event

此时只需要利用返回值是一个函数问题迎刃而解

savaFormData = (type) => {
    return (e) => {
        this.setState({
            [type]: e.target.value
        })
    }
}

整体代码为:

class App extends React.Component {
    state = {
        userName: '',
        passWord: ''
    }
    savaFormData = (type) => {
        return (e) => {
            this.setState({
                [type]: e.target.value
            })
        }
    }
    login = () => {
        alert(`用户名为: ${this.state.userName};密码为: ${this.state.passWord}`)
    }
    render() {
        return (
            <div>
                <input onChange={this.savaFormData("userName")} type="text" placeholder="用户名" />
                <input onChange={this.savaFormData("passWord")} type="text" placeholder="密码" />
                <button onClick={this.login}>登录</button>
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById("app"))

高阶函数其实在日常中也是经常使用的,引用大佬的话来说高阶函数是那些操作其他函数的函数。用最简单的话来说，高阶函数就是一个将函数作为参数或者返回值的函数。

所以其实很多方法也是高阶函数例如: setTimeOut(()=>{}); 数组的map()和forEach()等等

 

柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通函数
function add(a, b) {
    return console.log(a+b)
}

// 柯里化之后的函数
function curA(a) {
    return function(b) {
        return console.log(a+b)
    }
}

add(1, 2) // 3
curA(1)(3) // 3

通俗易懂就是: 通过函数调用的方式继续返回也是一个函数,实现了多次接收参数左后统一处理的函数形式就是柯里化:

savaFormData = (type) => {
    return (e) => {
        this.setState({
            [type]: e.target.value
        })
    }
}

上面的代码便是柯里化函数