useDebounce

React 钩子，会延迟调用函数，直到上次调用防抖函数以后经过等待毫秒之后。

第三个参数是防抖所依赖的数组值，其方式与 useEffect 中的相同。当其中一个值发生改变，防抖超时将会启动。

用法

  1. import React, { useState } from 'react';
  2. import { useDebounce } from 'react-use';
  4. const Demo = () => {
  5.   const [state, setState] = React.useState('Typing stopped');
  6.   const [val, setVal] = React.useState('');
  8.   useDebounce(
  9.     () => {
  10.       setState('Typing stopped');
  11.     },
  12.     2000,
  13.     [val]
  14.   );
  16.   return (
  17.     <div>
  18.       <input
  19.         type="text"
  20.         value={val}
  21.         placeholder="Debounced input"
  22.         onChange={({ currentTarget }) => {
  23.           setState('Waiting for typing to stop...');
  24.           setVal(currentTarget.value);
  25.         }}
  26.       />
  27.       <div>{state}</div>
  28.     </div>
  29.   );
  30. };

参考

  1. useDebouce(fn, ms: number, args: any[]);