React useDebounce钩子

对给定的值进行防抖处理。

• 创建一个自定义钩子，接受一个value和一个delay参数。
• 使用useState()钩子来存储防抖后的值。
• 使用useEffect()钩子在每次value更新时更新防抖后的值。
• 使用setTimeout()创建一个延迟delay毫秒后调用上一个状态变量的setter的定时器。
• 使用clearTimeout()在组件卸载时进行清理。
• 在处理用户输入时特别有用。

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

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

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

  return debouncedValue;
};

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 />
);