React 中的去抖输入

输入防抖动是一种用于提升 Web 应用性能和用户体验的技术。当用户在输入字段中输入内容时，应用可能会执行多项操作，例如筛选列表、从 API 获取数据，或根据用户的输入执行其他处理。这些操作的计算量可能很大，如果执行频率过高，会降低应用速度，甚至导致应用崩溃。

React 中的输入去抖动涉及在用户输入和输入值更新之间设置延迟。

要在 React 中创建去抖动输入，您可以使用以下步骤。

解决方案 1

首先我们使用useStateReact 提供的钩子将输入变量存储在状态中。

const [inputValue, setInputValue] = React.useState("")

然后我们创建一个名为的函数handleInputChange，它将处理输入变化，然后使用setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

接下来我们再次使用useStateReact 提供的钩子来存储去抖动的输入值

const [debouncedInputValue, setDebouncedInputValue] = React.useState("")

现在我们使用useEffect钩子并在更新 debouncedInputValue 之前执行延迟。

React.useEffect(() => {
  const delayInputTimeoutId = setTimeout(() => {
    setDebouncedInputValue(inputValue);
  }, 500);
  return () => clearTimeout(delayInputTimeoutId);
}, [inputValue, 500]);

500毫秒是作为更新deboucedInputValue的延迟时间，我们可以根据自己的需求添加这个时间。

每次 inputValue 发生变化时都会useEffect运行，之后会有 500 毫秒的延迟，然后 deboucneInputValue 会随着 inputValue 的改变而更新

现在我们可以在调用 API 或任何需要的地方使用 debounceInputValue 了。完整的解决方案如下：

import React from "react";

const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedInputValue, setDebouncedInputValue] = React.useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 500);
    return () => clearTimeout(timeoutId);
  }, [inputValue, 500]);

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};

解决方案 2

对于这个解决方案，我们将使用debounce来自use-debounce

首先，我们需要lodash通过运行以下命令在我们的应用程序中安装

npm install use-debounce

use-debounce然后我们从React 组件中导入 debounce 函数

import { useDebounce } from "use-debounce";

导入完成后，声明状态以存储输入值

const [inputValue, setInputValue] = React.useState("");

然后我们创建一个名为的函数handleInputChange，它将处理输入变化，然后使用setInputValue

const handleInputChange = (event) => {
   setInputValue(event.target.value);
}

然后，我们将使用 useDebounce hook 来对输入值进行去抖动处理。useDebounce 的第一个参数为输入值，第二个参数为延迟时间。然后，该 hook 将返回去抖动后的值，其值为debouncedValue.

const [debouncedValue] = useDebounce(inputValue, 500);

现在我们可以在任何需要的地方使用 debouncedValue。这是完整的解决方案

import React from "react";
import { useDebounce } from "use-debounce";
const DebounceInput = () => {
  const [inputValue, setInputValue] = React.useState("");
  const [debouncedValue] = useDebounce(inputValue, 500);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
  };

  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};

鏂囩珷鏉ユ簮锛�https://dev.to/manishkc104/debounce-input-in-react-3726