React项目中搜索框的onChange事件如何正确实现debounce防抖功能？

首先你注释的onChange写法不可行，原因是每次输入触发事件时，都会重新创建一个全新的防抖函数实例，不同实例之间独立计时，完全达不到防抖效果。

你需要单独创建持久化的防抖函数实例，避免每次组件渲染时重新生成，这里基于你已经引入lodash的场景修改，步骤如下：

1. 从React中引入useCallback和useEffect，用于持久化防抖函数和清理副作用
2. 创建防抖的查询更新函数，仅对触发父组件请求的逻辑做防抖，输入框的文本状态保持实时更新
3. 组件卸载时取消未执行的防抖回调，避免内存泄漏和无效状态更新

修改后的Search组件代码 #

import React, {useState, useCallback, useEffect} from 'react'
import { debounce } from "lodash";

const Search = ({getQuery}) => {
  const [text, setText] = useState('')

  // 持久化防抖函数，仅依赖getQuery变化时才重新生成
  const debouncedUpdateQuery = useCallback(
    debounce((q) => getQuery(q), 1000), // 防抖时长可自行调整，不建议超过1500ms
    [getQuery]
  )

  // 组件卸载时清理未执行的防抖回调
  useEffect(() => {
    return () => {
      debouncedUpdateQuery.cancel()
    }
  }, [debouncedUpdateQuery])

  const onChange = (q) => {
    setText(q) // 输入框文本实时更新，保证输入无延迟
    debouncedUpdateQuery(q) // 仅对触发请求的逻辑做防抖
  }

  return (
    <section className='search'>
        <form>
            <input 
            type='text'
            className='form-control'
            placeholder='Search characters'
            value={text}
            onChange={(e) => onChange(e.target.value)}
            autoFocus
            />
        </form>
    </section>
  )
}

export default Search

• 不要对输入框的文本状态更新做防抖，否则会出现用户输入后内容延迟显示的问题，体验极差
• 防抖时长建议设置在300ms~1000ms之间，平衡请求次数和响应速度
• 如果不想引入lodash，也可以自行实现简易防抖函数，示例如下：

const debounce = (func, delay) => {
  let timeoutId
  return (...args) => {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func.apply(this, args), delay)
  }
}

内容的提问来源于stack exchange，提问作者Darius