react实现定时器
使用 setInterval 实现定时器
在 React 中，可以通过 setInterval 实现定时器功能。需要在组件挂载时启动定时器，并在组件卸载时清除定时器以避免内存泄漏。
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <div>Count: {count}</div>;
}
export default Timer;使用 setTimeout 实现递归定时器
setTimeout 可以通过递归调用来实现类似 setInterval 的效果，这种方式更灵活，适合需要动态调整间隔时间的场景。
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearTimeout(timer);
}, [count]);
return <div>Count: {count}</div>;
}
export default Timer;自定义 Hook 封装定时器
可以将定时器逻辑封装为自定义 Hook，方便复用。
import { useState, useEffect } from 'react';
function useTimer(initialValue = 0, interval = 1000) {
const [count, setCount] = useState(initialValue);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, interval);
return () => clearInterval(timer);
}, [interval]);
return count;
}
function Timer() {
const count = useTimer(0, 1000);
return <div>Count: {count}</div>;
}
export default Timer;暂停和恢复定时器
通过状态控制定时器的暂停和恢复功能。
import React, { useState, useEffect, useRef } from 'react';
function Timer() {
const [count, setCount] = useState(0);
const [isRunning, setIsRunning] = useState(true);
const timerRef = useRef(null);
useEffect(() => {
if (isRunning) {
timerRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
}
return () => {
if (timerRef.current) clearInterval(timerRef.current);
};
}, [isRunning]);
const toggleTimer = () => {
setIsRunning(prev => !prev);
};
return (
<div>
<div>Count: {count}</div>
<button onClick={toggleTimer}>
{isRunning ? 'Pause' : 'Resume'}
</button>
</div>
);
}
export default Timer;使用 requestAnimationFrame 实现高精度定时器
对于需要高精度的动画或计时场景，可以使用 requestAnimationFrame。
import React, { useState, useEffect, useRef } from 'react';
function AnimationTimer() {
const [time, setTime] = useState(0);
const requestRef = useRef();
const startTimeRef = useRef();
const animate = (timestamp) => {
if (!startTimeRef.current) startTimeRef.current = timestamp;
const elapsed = timestamp - startTimeRef.current;
setTime(elapsed);
requestRef.current = requestAnimationFrame(animate);
};
useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
}, []);
return <div>Time: {Math.round(time)}ms</div>;
}
export default AnimationTimer;以上方法覆盖了 React 中实现定时器的常见需求，包括基础定时、暂停恢复、自定义 Hook 封装和高精度计时。根据具体场景选择合适的方式即可。
