上节课我们介绍了两个概念,一个是高阶函数,一个是函数的柯里化。但是我们没有必要哪哪都用柯里化,那么如果不用柯里化该怎么写呢?

回顾

在介绍这节课的内容之前我们先对上节课的内容做一个简单的回顾:

  • 高阶函数有两个评判标准,满足其中一个就可以
  • A 函数接收的参数是一个函数
  • A 函数的返回值是一个函数
  • 通过函数调用继续返回函数的方式实现多次接收函数最后统一处理的函数形式叫做函数的柯里化。

以上便是上节课我们说介绍的两个概念。

改写回调函数

上节课我们是用高阶函数和柯里化来完成了saveFormData,而且我们感觉好像不用柯里化我们真的就没法写了。但是真的是这样吗?我们先来看这段代码:

class Login extends React.Component {
  state = {...};

  render() {
    return (
      <form onSubmit={this.notify}>
        Username: <input type="text" 
                    onChange={e=>{this.saveFormData("username", e.target.value)}} />
        Password: <input type="password" 
                    onChange={e=>{this.saveFormData("password", e.target.value)}} />
        <button>Submit</button>
      </form>
    );
  }

  notify = e => {...};
  saveFormData = (dataType, value) => { 
    this.setState({ [dataType]: value }) 
  };
}

我们先不分析代码,我们先看一下效果:

image-20211229110644570

这个效果证明了我们上面代码的这个写法是可行的。接下来,分析。

上面这段代码,其他的不用管,我们先看saveFormData方法,这个方法干了些什么?是不是接收到dataTypevalue,然后把这一对值存到state中?这里我们看我们没有用event.target.value,我们是直接把value传进来了,那就说明我们早在调用saveFormData之前就已经执行了event.target.value了。我们知道,当我们onXxxx触发的时候才会传event,而event是由回调接收到的,但是saveFormData方法并没有接收event,那么有没有一种可能就是说,saveFormData方法就不是我们onChange的回调?但是这个方法肯定被执行了,不然state是不会有变化。那么这个方法是在什么时候被执行的?当然是onChange被触发执行的啊。

那么我们再来看这个onChange,我们一再强调,onXxxx一定得是一个函数。那么好看看我们代码中onChange={e => {this.saveFormData("username", e.target.value)}},首先这是不是一个函数?很明显这是一个箭头函数,那么这就满足了我们的规则,这个箭头函数作为onChange的回调,那么这个函数就会接收到onChange被触发时的event。那么我们在这个回调函数里面来调用saveFormData,并且传入dataTypeevent.target.value,这样不就满足了我们的需求了嘛。

所以说我们看上面这段代码我们用了柯里化了吗?没有。所以说在不使用柯里化的情况下我们也是可以完成我们的需求的。

但是这两种方法没有什么好坏之分,看大家个人喜好喜欢用什么方法。

总结

这一节其实没有什么课总结的,就是牢记onXxxx必须是一个函数,至于这个函数里面做了什么,就不重要了。

Copyright statement:The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article:https://work.lynchow.com/article/uncurrying_func/