介绍

主要介绍 setInterval（管理 setInterval）、setInterval（管理 setInterval）、useDebounce（对值的防抖）、useDebounceFn（对函数的防抖）、useThrottle（对值的节流）、useThrottleFn（对函数的节流）

在线演示：Domesy/SideEffect

管理 setInterval 的函数

  • useInterval：简单的理解就是，每隔一段时间就执行的函数，类似于轮询
  • 使用：三个参数 fn delay option
  • fn：重复调用的函数
  • delay：间隔时间，当值为 null 或 undefined 会停止计时器

  • option：对象，包含 immediate（是否在首次进行渲染，默认为false）

    代码演示

    image.png

    详细代码

    ```typescript import React, { useState } from ‘react’; import { Button } from ‘antd’; import { useInterval } from ‘ahooks’;

    const Test: React.FC = () => { const [count, setCount] = useState(0);

    useInterval(() => {

    1. setCount(count + 1);

    }, 1000);

    return (

    1. <>
    2.   <div style={{fontWeight: 'bolder'}}>基础用法：</div>
    3.   <div style={{marginTop: 8}}>每隔1000ms，数字加 1： {count}</div>
    4. </>

    ); }

    const Mock: React.FC = () => { const [count, setCount] = useState(0); const [interval, setInterval] = useState(1000);

    useInterval(

    1. () => {
    2.   setCount(count + 1);
    3. },
    4. interval,
    5. { immediate: true },

    );

  1. return (
  2.   <>
  3.     <Test />
  4.     <div style={{fontWeight: 'bolder'}}>高阶用法：</div>
  5.     <div style={{marginTop: 8}}>每隔{interval || 0}ms，数字加 1： {count}</div>
  6.     <div style={{marginTop: 8}}>相隔时间：{interval}</div>
  7.     <div style={{marginTop: 8, display: 'flex', justifyContent: 'flex-start'}}>
  8.       <Button type='primary' style={{marginRight: 16}} onClick={() => {
  9.         if(typeof interval === 'number') setInterval(interval + 1000)
  10.       }}>加1s</Button>
  11.       <Button type='primary' style={{marginRight: 16}} onClick={() => setInterval(1000)}>重置</Button>
  12.       <Button type='primary' style={{marginRight: 16}} onClick={() => setInterval(null)}>清除</Button>
  13.     </div>
  14.   </>
  15. );

};

export default Mock

  1. <a name="DlBGq"></a>
  2. ## 管理 setTimeout 的函数
  4. - **useTimeout：处理计时器函数的Hook**
  5. - **使用：两个参数 fn delay**
  6. - **fn：重复调用的函数**
  7. - **delay：间隔时间，当值为 null 或 undefined 会停止计时器**
  8. <a name="j2TKe"></a>
  9. ### 代码演示
  10. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/310196/1636105328770-746451ae-8177-465d-876c-cfadac5a2bde.png#clientId=u0c3b53d6-fcad-4&from=paste&height=122&id=u0dabdf01&margin=%5Bobject%20Object%5D&name=image.png&originHeight=122&originWidth=786&originalType=binary&ratio=1&size=7558&status=done&style=none&taskId=ua9345eb9-cdb5-4a2d-9127-7495a6b8acf&width=786)
  11. <a name="wKTJq"></a>
  12. ### 详细代码
  13. ```typescript
  14. import React, { useState } from 'react';
  15.   import { Button } from 'antd';
  16.   import { useTimeout } from 'ahooks';
  18.   const Mock: React.FC<any> = () => {
  19.     const [count, setCount] = useState(0);
  21.     useTimeout(() => {
  22.       setCount(count + 1);
  23.     }, 2000);
  25.     return (
  26.       <div>2000ms 后数字加1： {count}</div>
  27.     );
  28.   };
  30.   export default Mock;

对值的防抖

  • useDebounce：对值进行防抖的hook
  • 使用：const debouncedValue = useDebounce(value: any, { wait: number}])

  • value: 防抖的值， wait：超时时间

    代码演示

    image.png

    详细代码

    1. import React, { useState } from 'react';
    2. import { Button } from 'antd';
    3. import { useDebounce } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6.   const [value, setValue] = useState<string>('');
    7.   const debouncedValue = useDebounce(value, { wait: 500 });
    9.   return (
    10.     <div>
    11.       <input
    12.         value={value}
    13.         onChange={(e) => setValue(e.target.value)}
    14.         placeholder="Typed value"
    15.         style={{ width: 280 }}
    16.       />
    17.       <p style={{ marginTop: 16 }}>500ms后才会变化: {debouncedValue}</p>
    18.     </div>
    19.   );
    20. };
    22. export default Mock;

    对函数的防抖

  • useDebounceFn：对函数进行防抖的hook

  • 频繁调用run方法，但只会执行最后一遍
  • 使用方法： const { run, cancel, flush} = useDebounceFn(fn: (…args:any) => any, { wait: number})

  • run(防抖进行的函数)、cancel(取消当前防抖)、flush(当前防抖立即调用)

    代码演示

    image.png

    详细代码

    1. import React, { useState } from 'react';
    2. import { Button } from 'antd';
    3. import { useDebounceFn } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6.   const [value, setValue] = useState(0);
    7.   const { run } = useDebounceFn(
    8.     () => {
    9.       setValue(value + 1);
    10.     },
    11.     {
    12.       wait: 500,
    13.     },
    14.   );
    16.   return (
    17.     <div>
    18.       <p style={{ marginTop: 16 }}> 有效点击次数: {value} </p>
    19.       <Button type="primary" onClick={() => {run()}}>快速点击</Button>
    20.     </div>
    21.   );
    22. };
    24. export default Mock;

    对值的节流

  • useThrottle：对值进行节流的hook

  • 频繁调用run方法，但只会执行最后一遍
  • 使用方法： const throttledValue = useThrottle(value: any, { wait: number})

代码演示

image.png

详细代码

  1.  import React, { useState } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useThrottle } from 'ahooks';
  5.   const Mock: React.FC<any> = () => {
  6.     const [value, setValue] = useState<string>();
  7.     const throttledValue = useThrottle(value, { wait: 500 });
  9.     return (
  10.       <div>
  11.         <input
  12.           value={value}
  13.           onChange={(e) => setValue(e.target.value)}
  14.           placeholder="输入值"
  15.           style={{ width: 280 }}
  16.         />
  17.         <p style={{ marginTop: 16 }}>每隔 500ms 变化一次: {throttledValue}</p>
  18.       </div>
  19.     );
  20.   };
  22.   export default Mock;

对函数的节流

  • useThrottleFn：对函数进行节流的hook
  • 频繁调用 run，但只会每隔 500ms 执行一次相关函数。
  • 使用方法： const { run, cancel, flush} = useThrottleFn(fn: (…args:any) => any, { wait: number})

  • run(节流进行的函数)、cancel(取消当前节流)、flush(当前节流立即调用)

    代码演示

    image.png

    详细代码

    1. import React, { useState } from 'react';
    2. import { Button } from 'antd';
    3. import { useThrottleFn } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6.   const [value, setValue] = useState(0);
    7.   const { run } = useThrottleFn(
    8.     () => {
    9.       setValue(value + 1);
    10.     },
    11.     { wait: 500 },
    12.   );
    14.   return (
    15.     <div>
    16.       <p style={{ marginBottom: 16 }}> Clicked count: {value} </p>
    17.       <Button type='primary' onClick={run}>快速点击</Button>
    18.     </div>
    19.   );
    20. };
    22. export default Mock;