React渲染期间能否检测状态变更？实现搜索输入防抖

这问题我天天碰到！你要的就是**防抖（Debounce）**效果——也就是等用户停止输入500ms后再发起API请求，用React的useRef加useEffect就能轻松搞定，完全不用在渲染阶段纠结状态变更检测～

核心思路 #

我们需要一个能跨组件渲染周期保存值的容器（useRef）来存储定时器ID，每次用户输入时：

1. 先清除之前设置的定时器（避免重复触发请求）
2. 重新设置一个500ms后的新定时器
3. 只有当用户500ms内没有再输入时，这个新定时器才会执行API请求

完整示例代码 #

import { useState, useRef, useEffect } from 'react';

export default function SearchBox() {
  const [searchQuery, setSearchQuery] = useState('');
  // 用useRef存储定时器ID，它的current属性会在组件整个生命周期中保留值，不会随渲染重置
  const debounceTimerRef = useRef(null);

  // 监听搜索关键词的变化
  useEffect(() => {
    // 如果输入为空，直接返回，不用发起请求（也可以在这里清空搜索结果）
    if (!searchQuery.trim()) {
      return;
    }

    // 清除之前的定时器，确保只有最后一次输入才会触发请求
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    // 设置新的定时器，500ms后执行API请求
    debounceTimerRef.current = setTimeout(() => {
      // 这里替换成你的实际API请求逻辑
      console.log(`发起搜索请求：${searchQuery}`);
      // fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`)
      //   .then(res => res.json())
      //   .then(data => { /* 处理搜索结果 */ });
    }, 500);

    // 组件卸载或者搜索关键词变化时，清除定时器，防止内存泄漏
    return () => {
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current);
      }
    };
  }, [searchQuery]); // 仅当searchQuery变化时，才执行这个effect

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="输入关键词搜索..."
      />
    </div>
  );
}

关键细节解释 #

• useRef的作用：普通变量在组件每次渲染时都会被重新初始化，而useRef的current属性可以在组件的整个生命周期中保存值，完美用来存储定时器ID。
• useEffect的依赖数组：我们只监听searchQuery的变化，只有当用户输入改变时才会触发effect逻辑，避免不必要的执行。
• 清除定时器的时机：
  • 每次设置新定时器前清除旧的：确保只有最后一次输入的定时器会生效
  • 组件卸载时清除：防止组件卸载后定时器还触发请求，造成内存泄漏

扩展优化（可选） #

如果你的API请求是异步的，还可以考虑用AbortController来取消之前未完成的请求，避免旧请求的结果覆盖新请求的结果：

// 在effect里添加AbortController
useEffect(() => {
  const abortController = new AbortController();
  
  if (!searchQuery.trim()) {
    return;
  }

  if (debounceTimerRef.current) {
    clearTimeout(debounceTimerRef.current);
  }

  debounceTimerRef.current = setTimeout(() => {
    fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`, {
      signal: abortController.signal
    })
    .then(res => res.json())
    .then(data => { /* 处理结果 */ })
    .catch(err => {
      // 忽略取消请求的错误
      if (err.name !== 'AbortError') {
        console.error('请求失败:', err);
      }
    });
  }, 500);

  // 组件卸载或searchQuery变化时，取消请求并清除定时器
  return () => {
    abortController.abort();
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }
  };
}, [searchQuery]);

内容的提问来源于stack exchange，提问作者gian.gyger