React 涉及e.target时候，使用debounce节流函数

React 涉及e.target时候，使用debounce节流函数

关键词： React, input, e.target, debounce

举例场景: 在一个input搜索框中输入文本，如果2s内可能会有很多次input的onChange事件，每次都触发一个API请求，明显不合理，所以此时需要debounce节流函数，2s之内的所有输入只会请求一次API，做到交互层面的优化。

为了缩小关注点，示例直接使用loadsh的debounce函数。也直接使用了类的示例属性方法(可用过babel支持，因为实在不喜欢写过多的bind)

==直接上正确代码:==

import React from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  constructor() {
    super()
    this.doSearchAjax = debounce(this.doSearchAjax, 2000)
  }

  handleInputSearch = e => {
    this.doSearchAjax(e.target.value)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索', value)
  }

  render() {
    return (
      

        
e.target 结合 debounce 使用
        
      
    )
  }
}

再来看常见的错误代码示例

一、直接使用debounce函数包裹事件函数

报错: Uncaught TypeError: Cannot read property 'value' of null

原因分析: 涉及到React中的合成事件，详见React合成事件,debounce包装后的回调函数，是个异步事件，即e.target为null了

解决方案: 使用e.persist()实现对事件的引用保留

import React from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  handleInputSearch = e => {
    this.doSearchAjax(e.target.value)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索')
  }

  render() {
    return (
      

        
e.target 结合 debounce 使用
        
      
    )
  }
}

二、使用了e.persist()，但是 debounce 包含的函数并不会执行

import React from 'react'
import {debounce} from 'lodash'

export default class InputDebounce extends React.Component {
  handleInputSearch = e => {
    // 对原有事件进行保留
    e.persist()
    debounce(() => {
      // 函数并不会执行
      this.doSearchAjax(e.target.value)
    }, 2000)
  }

  doSearchAjax = value => {
    console.log('执行AJAX搜索')
  }

  render() {
    return (
      

        
e.target 结合 debounce 使用
        
      
    )
  }
}

这时候，需要将异步执行的函数抽离出来，即开头的正确代码。

正确代码里面并未使用e.persist()，因为没有必要，onChange函数并非是被debounce函数包装的。这里写出来只是为了记录踩坑，估计也有很多小伙伴掉过这个坑吧