React 使用过程中，如何让输入完成时自动触发请求？

2024-01-26 09:23:21

防抖 (Debounce)

防抖是一种技术，它可以用来减少函数的调用次数。它的原理是，当一个函数被调用时，它不会立即执行，而是等待一段时间。如果在这段时间内，函数又被调用了，那么就不会执行之前的调用，而是重新计时。这样，就可以减少函数的调用次数，同时又能保证数据的及时更新。

useEffect 和 useCallback

在 React 中，我们可以使用 useEffect 和 useCallback 钩子来实现防抖。useEffect 钩子可以用来在组件的某些生命周期中执行一些操作，而 useCallback 钩子可以用来创建不会在每次组件渲染时都改变的回调函数。

实现过程

import { useState, useEffect, useCallback } from "react";

const DebounceInput = () => {
  const [value, setValue] = useState("");

  const debouncedChangeHandler = useCallback(() => {
    // 这里执行向服务器发送请求的操作
  }, []);

  useEffect(() => {
    const timeout = setTimeout(() => {
      debouncedChangeHandler();
    }, 500);

    return () => {
      clearTimeout(timeout);
    };
  }, [value, debouncedChangeHandler]);

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

export default DebounceInput;