问题:
在离开当前组件页面后,清除定时器,定时器的标识会在一瞬间变为 undefined
, 但立马就会又重新开始执行定时器,而且定时器标识不变。
原因:
函数组件的本质是一个函数,而在在一个局部函数中,函数每一次执行,都会在把函数的变量重新生成一次。
参考阅读:
解决方法:
方法一:将定时器标识变量定义在函数组件外部(全局环境中)
// home.jsx
var timer = null; //定义在函数组件外面
const Home = (props) => {
const [posiy, setPosy] = useState(0);
timer = setInterval(() => {
console.log('定时器')
}, 5000);
return (
<div>定时器</div>
)
}
export default Home;
方法二:使用 useRef 创建一个变量
useRef
不仅仅是用来管理 DOM ref
的,它还相当于 this
, 可以存放任何变量。
在 useRef
创建的 ref
仿佛就像外部定义的一个全局变量,不会随着组件的更新而重新创建。但组件销毁,它也会消失,不用手动进行销毁。也就是说 useRef
创建的 ref
并不会随着组件的更新而重新构建。由于这个特性,在使用 react-hook
的时候,可以使用useRef
来存储常量。
把定时器的标识用 useRef
保存起来
import React, { useState, useEffect, useRef } from 'react';
let intervalHandle = useRef();
创建时
intervalHandle.current = setInterval(() => {
console.log(new Date());
}, 1000);
清除时
clearInterval(intervalHandle.current);
组件卸载时清除
useEffect(() => {
return () => {
// 清除定时器
clearInterval(intervalHandle.current);
};
}, []);
两种方法区别参考阅读:useRef详细总结