Voyz's Studio.

React自定义Hook--useInterval

React Native React
字数统计: 87阅读时长: 1 min
2021/02/10 Share

React自定义Hook–useInterval

避免在useEffect里setInterval时，因未清除计时器而导致的两次副作用之间的相互影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useEffect, useRef } from 'react';

export default function useInterval(callback, delay) {
  const _callback = useRef();

  useEffect(() => {
    _callback.current = callback;
  });

  useEffect(() => {
    function clock() {
      _callback.current();
    }
    if (delay !== null) {
      let id = setInterval(clock, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}
CATALOG
  1. 1. React自定义Hook–useInterval
Total : 137
2021
2020
2019
2018
技术贴 JavaScript Flutter 算法题 热题HOT100 哈希表 滑动窗口 回溯算法 链表 二分法 矩阵 动态规划 贪心算法 指针 快速排序 迭代 二叉树 数组 快慢指针 排序 背包问题 单调栈 栈 DFS 岛屿问题 React Native React 旅行记 效率工具 python 小程序 英语 生活 足球 算法 性能优化 ES6 TypeScript koa