React useDebounce 钩子

简介

在本实验中，我们将学习如何创建一个名为 useDebounce 的自定义 React 钩子，它有助于防抖用户输入。防抖是一种技术，它会延迟函数的调用，直到自上次调用以来已经过了一定的时间。这种技术通常用于用户输入触发应用程序状态频繁更新的场景，因为它有助于减少不必要的重新渲染并提高性能。

Skills Graph

React useDebounce 钩子

虚拟机中已经提供了 index.html 和 script.js。一般来说，你只需要在 script.js 和 style.css 中添加代码。

要对给定值进行防抖处理，你可以创建一个自定义钩子，它接受一个 value 和一个 delay。使用 useState() 钩子来存储防抖后的值，并使用 useEffect() 钩子在每次 value 更新时更新防抖后的值。为了将前一个状态变量的设置器调用延迟 delay 毫秒，使用 setTimeout()。为了在组件卸载时进行清理，使用 clearTimeout()。这在处理用户输入时特别有用。

以下是 useDebounce() 钩子的一个示例实现：

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

你可以在组件中像这样使用 useDebounce() 钩子：

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = useDebounce(value, 500);

  return (
    <div>
      <p>
        当前值：{value} - 防抖后的值：{lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>增加</button>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React useDebounce 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。