在React中使用定时器通常有两种方式:使用setInterval
和setTimeout
函数。
- 使用
setInterval
函数:
首先,在组件中导入useEffect
和useState
函数:
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
函数在组件卸载时清除定时器。
- 使用
setTimeout
函数:
首先,在组件中导入useEffect
和useState
函数:
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;
- 首先,声明了一个变量
num
并初始化为0,用来存储递增的数字。 - 然后,使用
setInterval
函数创建了一个定时器。setInterval
函数接受两个参数:回调函数和时间间隔。在这里,回调函数为一个箭头函数,用于执行定时的递增操作。 - 在回调函数中,
num
自增1,表示递增的数字。当num
等于11时,通过条件判断将num
重置为0,实现周期递增的效果。 - 在回调函数中,使用
setGetChangeNum
函数将递增的结果num
更新到getChangeNum
状态变量中,以便将其显示在文本段落元素中。 setInterval
的第二个参数为时间间隔,这里设置为1000毫秒,即每隔1秒执行一次回调函数。- 最后,使用
setChangeNum
函数将定时器的ID存储到changeNum
状态变量中,以便在需要的时候清除定时器。
在点击文本段落元素时,initiate
函数会被调用,定时器开始启动,每隔1秒递增数字并更新到状态变量中。文本段落元素会显示递增的数字。