react中使用原生防抖和ahooks中的防抖

目的

减少响应跟不上触发频率的解决方案

问题导入

不经过任何处理的情况下,当输入框发生改变就会触发一次,如果是请求的话,那么在瞬间内就会发送大量的请求,给服务器带来负面影响

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

export default function App () {
  const [val, setVal] = useState('')

  const onChange = (value) => {
    setVal(value)
    console.log(val)
  }
  return (
    <div>
      <input
        value={val}
        onChange={(e) => {
          onChange(e.target.value)
        }}
        type="text"
      />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

自己写个定时器解决

import React, { useRef, useState } from 'react'
import ReactDOM from 'react-dom'

export default function App () {
  const timerId = useRef(null)
  const [val, setVal] = useState('')

  const onChange = (value) => {
    setVal(value)
    console.log(val)
    clearTimeout(timerId.current)
    timerId.current = setTimeout(() => {
      console.log(val)
    }, 500)
  }
  return (
    <div>
      <input
        value={val}
        onChange={(e) => {
          onChange(e.target.value)
        }}
        type="text"
      />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

使用ahooks中的防抖

useRequest是一个强大的异步数据管理Hooks,React项目中的网络请求场景使用useRequest就够了

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { useRequest } from 'ahooks'

export default function App () {
  const [val, setVal] = useState('')
  const { run } = useRequest(
    (e) => {
      console.log(e)
    },
    {
      debounceWait: 500, //防抖等待时间, 单位为毫秒，设置后，进入防抖模式
      manual: true
    }
  )

  const onChange = (value) => {
    setVal(value)
    run(value)
  }
  return (
    <div>
      <input
        value={val}
        onChange={(e) => {
          onChange(e.target.value)
        }}
        type="text"
      />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))