【taro react】 ---- 常用自定义 React Hooks 的实现【二】

6. useInterval 实现

一个可以处理 setInterval 的 Hook。

6.1 实现原理

  1. 使用 useMemoizedFn 创建一个保存 useInterval 执行的回调函数;
  2. 使用 useRef 创建一个执行 setInterval 时返回的变量的保存变量,也就是用于保存 setInterval 返回的 timer ,用于清除计时器;
  3. 使用 useCallback 创建一个清除计时器的函数 clear,由于第二个参数传入的是 [],所以就和 useMount 一样,只执行一次;
    3.1 判断第二步中的 timerRef.current 是否存在;
    3.2 存在说明计时器存在,就执行 clearInterval 清空计时器;
  4. 使用 useEffect 创建一个依赖于 delay【间隔时间】,immediate【是否在首次渲染时立即执行】的副作用;
    4.1 判断 delay【间隔时间】是否是数字或者是小于0的数字,是就不执行;
    4.2 判断 immediate【是否在首次渲染时立即执行】是否 true,true就立即执行第一步中保存的 timerCallback 回调;
    4.3 执行计时器 setInterval 并保存其返回 timer;
    4.4 卸载时执行清空计时器函数;
  5. 最后将计时器函数返回,可以在调用 hook 的时候执行清空计时器。

6.2 实现代码

import { useMemoizedFn } from

猜你喜欢

转载自blog.csdn.net/m0_38082783/article/details/131060580