React：在表单元素事件处理上应用 Throttle 或 Debounce

在介绍 React 表单使用的时候，我们创建一个 HelloForm 组件，组件里用了一个文本框，监听了文本框的 change 事件，用 handleChange 来处理这个事件。在这个事件处理里面，输出了文本框里面发生变化的值。有些动作我们不想执行的那么勤快，有一点点变化就去执行一些任务，这样太浪费。比如你想实时地把用户输入的内容保存在后端数据库里，后端可能受不大了，我们得去做点限制。可以用 Throttle 或 Debounce。

在 Lodash 这个库里有可以创建  Throttle 或 Debounce 函数的方法。先给项目安装一下 Lodash：

yarn add lodash

在项目文件里，可以直接导入 Lodash 的 Throttle 或 Debounce 。像这样：

import throttle from 'lodash/throttle'
import debounce from 'lodash/debounce'

然后去改造一下 HelloForm 这个组件，先改造一下 handleChange 这个事件处理：

 handleChange = (event) => {
   event.persist()

   this.setState({
     text: event.target.value
   })

   this.log(event)
 }

然后在组件里添加一个 constructor 方法，内容是：

 constructor(props) {
   super(props)

   this.log = debounce((event) => {
     console.log(event.target.value)
   }, 1000)
 }

这里我们用了 debounce 去创建了一个函数，设置了延迟时长为 1 秒钟。现在，会有神奇的事情发生。在应用界面上的文本框输入点内容，注意控制台上输出的东西。

把 debounce 换成 throttle 再试一下。