在 React 中如何使用定时器

在React中使用定时器通常有两种方式:使用setIntervalsetTimeout函数。

  1. 使用setInterval函数:

首先,在组件中导入useEffectuseState函数:

       import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID:

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器:

       useEffect(() => {const id = setInterval(() => {// 定时器执行的代码}, 1000);setTimerId(id);return () => {clearInterval(timerId); // 组件卸载时清除定时器};}, []);

在上述代码中,通过useEffect中的一个空数组([])作为依赖项,确保只在组件挂载时启动一次定时器,并使用clearInterval函数在组件卸载时清除定时器。

  1. 使用setTimeout函数:

首先,在组件中导入useEffectuseState函数:

        import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID:

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器:

       useEffect(() => {const id = setTimeout(() => {// 定时器执行的代码}, 1000);setTimerId(id);return () => {clearTimeout(timerId); // 组件卸载时清除定时器};}, []);

在上述代码中,通过useEffect中的一个空数组([])作为依赖项,确保只在组件挂载时启动一次定时器,并使用clearTimeout函数在组件卸载时清除定时器。

请根据你的具体需求选择适合的定时器函数,并根据组件的生命周期来启动和清除定时器。

实际案例:

import { useEffect, useState } from "react";const TimerPage = () => {const [changeNum, setChangeNum] = useState<any>(null);const [getChangeNum, setGetChangeNum] = useState<any>(null);const initiate = () => {let num = 0;const id = setInterval(() => {// 定时执行的代码num++;if (num == 11) {// clearTimeout(id); // 在 getChangeNum 等于 10 时关闭定时器num = 0;}setGetChangeNum(num);}, 1000); // 每隔1秒执行一次setChangeNum(id);};return (<div className="box"><p onClick={initiate}>显示数字 {getChangeNum} </p></div>);
};export default TimerPage;
  1. 首先,声明了一个变量num并初始化为0,用来存储递增的数字。
  2. 然后,使用setInterval函数创建了一个定时器。setInterval函数接受两个参数:回调函数和时间间隔。在这里,回调函数为一个箭头函数,用于执行定时的递增操作。
  3. 在回调函数中,num自增1,表示递增的数字。当num等于11时,通过条件判断将num重置为0,实现周期递增的效果。
  4. 在回调函数中,使用setGetChangeNum函数将递增的结果num更新到getChangeNum状态变量中,以便将其显示在文本段落元素中。
  5. setInterval的第二个参数为时间间隔,这里设置为1000毫秒,即每隔1秒执行一次回调函数。
  6. 最后,使用setChangeNum函数将定时器的ID存储到changeNum状态变量中,以便在需要的时候清除定时器。

在点击文本段落元素时,initiate 函数会被调用,定时器开始启动,每隔1秒递增数字并更新到状态变量中。文本段落元素会显示递增的数字。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/56701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6-简介、语法

ES6 ES6简介 ​ ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语…

Linux 常用

系统信息 查看CPU信息&#xff08;型号&#xff09; cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c查看物理CPU个数 cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc -l查看每个物理CPU中core的个数(即核数) cat /proc/cpuinfo | grep "c…

Android创建签名文件,并获取签名文件MD5,SHA1,SHA256值

一、创建Android签名文件 使用Android Studio开发工具&#xff0c;可视化窗口进行创建 第一步&#xff1a;点击AndroidStudio导航栏上的 Build→Generate Signed Bundle / APK 第二步&#xff1a;选择APK选项 第三步&#xff1a;创建签名文件 第四步&#xff1a;输入创建签名的…

如何五分钟设计制作自己的蛋糕店小程序

在现如今的互联网时代&#xff0c;小程序已成为企业推广和销售的重要利器。对于蛋糕店来说&#xff0c;搭建一个小程序可以为其带来更多的品牌曝光和销售渠道。下面&#xff0c;我们将以乔拓云平台为例&#xff0c;来教你如何从零开始搭建自己的蛋糕店小程序。 首先&#xff0c…

2023/8/27周报

目录 摘要 论文阅读 1、标题和现存问题 2、过度平滑和度量方法 3、处理过坡 4、实验结果 深度学习 1、解决可视化问题 2、CART算法 总结 摘要 本周在论文阅读上&#xff0c;阅读了一篇Pairnorm:解决GNNS中的过平滑问题的论文。PairNorm 的核心思想是在图卷积层之间引…

CUDA和C++混合编程及CMakeLists.txt

1. 概要 首先认识一个问题&#xff0c;单从CMakeLists.txt的角度来看&#xff0c;无法同时使用两种编译器编译两种语言。不过直接编写Makefile是可以的&#xff0c;通过设置不同的任务&#xff0c;可以实现一个Makefile编译两个语言。但这不是这里要讨论的重点。 使用CUDA和C进…

7 集群基本测试

1. 上传小文件到集群 在hadoop路径下执行命令创建一个文件夹用于存放即将上传的文件&#xff1a; [atguiguhadoop102 ~]$ hadoop fs -mkdir /input上传&#xff1a; [atguiguhadoop102 hadoop-3.1.3]$ hadoop fs -put wcinput/work.txt /input2.上传大文件 [atguiguhadoop1…

Vue 3 常见面试题汇总

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 前言 最近两年许多大厂都在实行“降本增效”、“优化组织架构”&#xff0c;然后“为社会输送了大量人才”&#xff0c;今年&#xff08;2023&#xff…

视频云存储/安防监控视频智能分析网关V3:占道经营功能详解

违规占道经营者经常会在人流量大、车辆集中的道路两旁摆摊&#xff0c;导致公路交通堵塞&#xff0c;给居民出行的造成不便&#xff0c;而且违规占路密集的地方都是交通事故频频发生的区域。 TSINGSEE青犀视频云存储/安防监控视频/AI智能分析网关V3运用视频AI智能分析技术&…

10万字智慧政务大数据平台项目建设方案222页[Word]

导读&#xff1a;原文《10万字智慧政务大数据平台项目建设方案222页[Word]》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 1.1 项目建设目标 推进市一级政府搭建数…

求生之路2社区服务器sourcemod安装配置搭建教程centos

求生之路2社区服务器sourcemod安装配置搭建教程centos 大家好我是艾西&#xff0c;通过上文我们已经成功搭建了求生之路2的服务端。但是这个服务端是纯净的服务端&#xff0c;就是那种最纯粹的原版。如果想要实现插件、sm开头的命令等功能&#xff0c;需要安装这个sourcemod。…

js中的解构赋值

在JavaScript中&#xff0c;解构赋值是一种方便地从数组或对象中提取值并赋给变量的方法。 它允许你使用一种简洁的语法来快速访问和使用数据。 对于数组解构赋值&#xff0c;你可以使用方括号&#xff08;[]&#xff09;来指定变量名&#xff0c;并将其放在赋值语句的左侧。例…

opencv 案例实战02-停车场车牌识别SVM模型训练及验证

1. 整个识别的流程图&#xff1a; 2. 车牌定位中分割流程图&#xff1a; 三、车牌识别中字符分割流程图&#xff1a; 1.准备数据集 下载车牌相关字符样本用于训练和测试&#xff0c;本文使用14个汉字样本和34个数字跟字母样本&#xff0c;每个字符样本数为40&#xff0c;样本尺…

家政服务行业搭建小程序的实用技巧分享

随着移动互联网的发展&#xff0c;小程序成为了各行各业的新宠。对于家政服务行业来说&#xff0c;搭建一个小程序商城可以极大地提升服务的便捷性和用户体验&#xff0c;同时也能提高企业的竞争力。本文将分享家政服务行业搭建小程序的实用技巧&#xff0c;帮助您顺利创建属于…

Docker 常用服务 安装使用 教程

Docker安装常用服务 1、 安装mysql # 1.拉取mysql镜像到本地 docker pull mysql:tag (tag不加默认最新版本) # 2.运行mysql服务 docker run --name mysql -e MYSQL_ROOT_PASSWORDroot -d mysql:tag --没有暴露外部端口外部不能连接 docker run --name mysql -e MYSQL_ROOT_PAS…

mongodb和redis的用途

MongoDB和Redis都是常见的NoSQL数据库&#xff0c;它们有不同的特点和用途。 MongoDB的主要特点和用途&#xff1a; 数据存储&#xff1a;MongoDB是一种面向文档的数据库&#xff0c;以JSON样式的BSON文档&#xff08;二进制JSON&#xff09;的形式存储数据。它支持复杂的数据…

【从零学习python 】63.正则表达式中的re.Match类及其属性和方法介绍

文章目录 re.Match类介绍进阶案例 re.Match类介绍 当我们调用re.match方法、re.search方法&#xff0c;或者对re.finditer方法的结果进行迭代时&#xff0c;拿到的数据类型都是re.Match对象。 x re.match(rh,hello) y re.search(re,hello) z re.finditer(rl,hello) print(…

[Unity] 单例设计模式, 可供继承的单例组件模板类

一个可供继承的单例组件模板类: public class SingletonComponent<TComponent> : Componentwhere TComponent : SingletonComponent<TComponent> {static TComponent _instance;private static TComponent GetOrFindOrCreateComponent(){// 双检索if (_instance …

树莓派使用Nginx+cpolar内网穿透实现无公网IP访问内网本地站点

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…

Python爬取旅游网站数据机票酒店价格对比分析

本文将介绍如何使用Python爬虫从旅游网站上获取机票和酒店的价格数据&#xff0c;并实现价格对比分析&#xff0c;帮助你做出明智的旅行决策。我们提供了完善的方案和代码&#xff0c;让你能够轻松操作并获得实际价值。 使用Python爬虫获取旅游网站上的机票和酒店价格数据&…