ahooks源码解析：useDebounce深入浅出详解

2024-02-01 19:52:07

对于任何前端开发者来说，防抖都是一个至关重要的概念，因为它可以防止因连续触发事件（例如调整文本输入字段）而导致的不必要的渲染或计算。在ahooks中，useDebounce函数提供了一种优雅且可重用的方式来实现防抖。

1. 深入理解useDebounce

1.1 函数签名

const useDebounce: (value: T, delay?: number) => [T, boolean];

useDebounce函数有两个参数：

value: 要防抖的值
delay（可选）：防抖延迟，以毫秒为单位（默认为0）

函数返回一个元组，其中包含两个值：

元组的第一个元素是防抖后的值
元组的第二个元素是一个布尔值，指示防抖操作是否正在进行中

1.2 工作原理

useDebounce内部使用一个setTimeout函数来实现防抖。当value发生变化时，它会清除任何挂起的setTimeout函数并创建一个新的函数，该函数将在delay毫秒后更新防抖后的值。

如果在delay时间内再次更新value，则会清除新创建的setTimeout函数，从而防止更新防抖后的值。

2. 实战案例

2.1 限制文本输入字段中的请求

考虑这样一个场景：你有一个文本输入字段，当用户输入时会触发一个函数来获取建议。为了防止在用户键入时触发过多的请求，我们可以使用useDebounce来限制函数的调用频率。

import { useDebounce } from 'ahooks';

const SearchInput = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [debounceSearchQuery, isDebouncing] = useDebounce(searchQuery, 500);

  useEffect(() => {
    if (!isDebouncing) {
      // 发起请求获取建议
    }
  }, [debounceSearchQuery, isDebouncing]);

  return (
    <input
      type="text"
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
    />
  );
};

2.2 节流滚动事件

另一个常见的用例是节流滚动事件。通过限制滚动事件的触发频率，我们可以优化滚动密集型应用程序的性能。

import { useDebounce } from 'ahooks';

const InfiniteScroll = () => {
  const [offset, setOffset] = useState(0);
  const debouncedOffset = useDebounce(offset, 100);

  useEffect(() => {
    if (!debouncing) {
      // 滚动后加载更多数据
    }
  }, [debouncedOffset, isDebouncing]);

  return (
    <div
      onScroll={(e) => {
        setOffset(e.target.scrollTop);
      }}
    />
  );
};