React Hooks 实现防抖的要点

2023-12-21 04:30:11

前言

在前端开发中，防抖（debounce）是一种常用的技术，用于防止函数在短时间内被频繁调用，从而提高性能。在React中，我们可以使用React Hooks来实现防抖，本文将详细介绍如何使用useDebounce这个自定义Hook来实现防抖。

原理

防抖的原理是，当一个函数被调用时，会在内部创建一个计时器。如果在计时器结束之前再次调用该函数，那么计时器会重新开始。只有当计时器结束时，函数才会真正执行。这样就可以防止函数在短时间内被频繁调用。

实现

在React中，我们可以使用useCallback和useState来实现useDebounce这个自定义Hook。useCallback可以确保函数在组件的生命周期内不会改变，而useState可以用于存储计时器和防抖后的函数。

import React, { useState, useCallback } from 'react';

export const useDebounce = (callback, delay) => {
  const [timer, setTimer] = useState(null);

  const debouncedCallback = useCallback(() => {
    if (timer) {
      clearTimeout(timer);
    }
    const newTimer = setTimeout(() => {
      callback();
    }, delay);
    setTimer(newTimer);
  }, [callback, delay, timer]);

  return debouncedCallback;
};

使用

我们可以像下面这样使用useDebounce：

import React, { useState } from 'react';
import { useDebounce } from './useDebounce';

const SearchBar = () => {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce((e) => {
    setQuery(e.target.value);
  }, 500);

  return (
    <input type="text" value={query} onChange={debouncedQuery} />
  );
};