const useInterval = (callback, delay) => {
const savedCallback = useRef(); // 保存新回调
useEffect(() => {
savedCallback.current = callback;
}); // 建立 interval
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}

  

react-hook设定定时器的方法的更多相关文章

  1. 使用React Hook后的一些体会

    一.前言 距离React Hook发布已经有一段时间了,笔者在之前也一直在等待机会来尝试一下Hook,这个尝试不是像文档中介绍的可以先在已有项目中的小组件和新组件上尝试,而是尝试用Hook的方式构建整 ...

  2. React Hook:使用 useEffect

    React Hook:使用 useEffect 一.描述 二.需要清理的副作用 1.在 class 组件中 2.使用 effect Hook 的示例 1.useEffect 做了什么? 2.为什么在组 ...

  3. React Hook上车

    React Hook 是 v16.8 的新功能,自诞生以来,受到广泛的好评,在 React 版本更新中具有里程碑的意义.现在都2020年了,再不上车 React Hook 就真的 out 了... H ...

  4. React Hook挖坑

    React Hook挖坑 如果已经使用过 Hook,相信你一定回不去了,这种用函数的方式去编写有状态组件简直太爽啦. 如果还没使用过 Hook,那你要赶紧升级你的 React(v16.8+),投入 H ...

  5. 【译】值得推荐的十大React Hook 库

    十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文作者:Juraj Pavlo ...

  6. React Hook 入门使用

    React Hook 是什么 1.没有比官网说的更好的 HOOK 1. React Hook 官方 2. 用我们自己的话说,它是一个钩子函数,用来处理组件间的状态的一个方法,暂时理解为一个高阶函数吧. ...

  7. React报错之React Hook useEffect has a missing dependency

    正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing depende ...

  8. React报错之React hook 'useState' cannot be called in a class component

    正文从这开始~ 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class compo ...

  9. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

随机推荐

  1. 【转】axios用post提交的数据格式

    本文链接:https://blog.csdn.net/wopelo/article/details/78783442vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vu ...

  2. Nginx笔记一

      nginx: 为什么选择nginx: nginx是一个高性能的web和反向代理服务器. 作为web服务器:使用更少的资源,支持更多的并发连接,更高的效率,能够支持高达5w个并发连接数的相应, 作为 ...

  3. vue报类似警告Computed property "isLoading" was assigned to but it has no setter

    一.原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 setter,也就是 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个警告,vuex还会出现通过com ...

  4. 开源跨境ERP - 小老板 Docker/Docker Compose一键部署

    先上部署成功后的截图,各个菜单点击均无报错 DockerCompose 包含: 1. 三个mysql5.7数据库 2. redis php会话存储+ memcached 3. 小老板php主程序 do ...

  5. Flask+gevent-websocket模块实现websocket

    后端代码: from flask import Flask,request from geventwebsocket.handler import WebSocketHandler from geve ...

  6. Python 嵌套列表解析

    将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...

  7. String特性之 “字符串驻留池”

    1. 字符串驻留池,就是一块与堆区并行的存放字符串对象的内存区,JVM的驻留池机制规定: 在池中创建一个String对象,第二行会先在池中寻找是否有值与"abc"相同的String ...

  8. 【JOISC2012 / bzoj4388】Invitation

    Description link Solution 可以发现题目在模拟 Prim 算法求最大生成树的过程,树边故答案与起点 \(C\) 无关. 先把所有区间离散化,注意对于一个区间 \([l,r]\) ...

  9. 友善之臂NanoPC T4网络相关设置

    目前(2019年8月)NanoPC T4的桌面系统FriendlyDesktop是基于Ubuntu18.04进行集成的,因此大部分可以参考Ubuntu18.04的配置方法. 1.无线网络配置 可参考官 ...

  10. C#信号量(Semaphore,SemaphoreSlim)

    Object->MarshalByRefObject->WaitHandle->Semaphore 1.作用: 多线程环境下,可以控制线程的并发数量来限制对资源的访问 2.举例: S ...