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

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>

)

}

}

 

 

以上是 React-高阶函数_函数柯里化 的全部内容, 来源链接: utcz.com/z/384142.html

回到顶部