第十一章 使用高阶函数和非高阶函数对组件进行优化

   之前我们对表单数据写了一个组件，用来获取表单数据，但是写法和代码结构非常繁琐，且代码复用率低，在此，我们对其进行改造和优化。

使用函数柯里化进行优化

class Login extends React.Component {

      // 初始化状态
      state = {
        username: '',
        password: ''
      }

      loginFunc = (event) => {
        // 阻止表单默认行为
        event.preventDefault();
        // 从状态里面获取表单数据
        const { username, password } = this.state
        // 获取输入框的值
        const data = {username, password }
        console.log('表单数据', data)
      }

      saveFormData = (dataType) => {
        return (event) => {
          this.setState({ [dataType]: event.target.value })
        }
      }

      render () {
        return (
          <form onSubmit={this.loginFunc}>
            用户名： <input onChange={this.saveFormData('username')} type="text" />
            密码： <input onChange={this.saveFormData('password')} type="password" />
            <button>登录</button>
          </form>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Login />, document.getElementById('app'))

从以上代码我看可以看出，我们新增了一个公共函数成为了onChange事件的回调函数：

saveFormData = (dataType) => {
        return (event) => {
          this.setState({ [dataType]: event.target.value })
        }
}

作为回调函数的一个条件是，它作为参数传递给另一个函数，并在该函数完成后被调用。所以我们的公共函数返回值也是一个函数，这个返回的函数就是onChange事件的回调函数。

其中dataType参数作为一个标识，让我们知道获取的值是用户名还是密码，或者是其他表单数据，总之该标识是用于区分表单数据类型的。

而event参数是作为事件回调的参数，我们可以通过事件源拿到当前输入框的数据，进行组装并保存在状态中，供后续使用。

在这里我们引出一个概念：函数的柯里化

函数的柯里化是指将一个接受多个参数的函数转化成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术通常是通过闭包和递归实现的。在JavaScript中，可以使用bind()方法或者手动实现来实现函数的柯里化。

简单来说：通过函数调用继续返回函数的方式，实现多次接收参数，最后统一处理的函数编码形式。

高阶函数

如果一个函数满足下面2个条件之一，那该函数就是高阶函数。

• 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
• 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

常见的高阶函数有：Promise、setTimeout、map、debounce(节流)、throttle(防抖) 等等。

---

使用非高阶函数优化

 class Login extends React.Component {

      // 初始化状态
      state = {
        username: '',
        password: ''
      }

      loginFunc = (event) => {
        // 阻止表单默认行为
        event.preventDefault();
        // 从状态里面获取表单数据
        const { username, password } = this.state
        // 获取输入框的值
        const data = {username, password }
        console.log('表单数据', data)
      }

      saveFormData = (dataType,event) => {
        this.setState({ [dataType]: event.target.value })
      }

      render () {
        return (
          <form onSubmit={this.loginFunc}>
            用户名:<input onChange={event => this.saveFormData('username',event)} type="text" />
            密码:<input onChange={event => this.saveFormData('username',event)} type="password" />
            <button>登录</button>
          </form>
        )
      }
    }
    // 2、将虚拟DOM渲染到页面，标签必须闭合
    ReactDOM.render(<Login />, document.getElementById('app'))

从以上代码中，有两处改动：

1、saveFormData函数接收了2个参数，一个是标识一个是事件。

saveFormData = (dataType,event) => {
        this.setState({ [dataType]: event.target.value })
}

2、输入框的回调事件，利用了箭头函数将事件（event）参数传入saveFormData函数中

<input onChange={event => this.saveFormData('username',event)} type="text"/>
<input onChange={event => this.saveFormData('username',event)} type="password"/>

这样我们就避免使用高阶函数的方式。

---

以上两种方式，都可以对组件进行优化，看开发者喜好，选择其一使用即可。