利用useRef hooks 解决定时器关闭不到的问题

最新推荐文章于 2025-04-20 19:45:06 发布

宽哥好

最新推荐文章于 2025-04-20 19:45:06 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

分类专栏：开发文章标签： react.js

本文链接：https://blog.youkuaiyun.com/qq_37804939/article/details/123808398

开发专栏收录该内容

1 篇文章

订阅专栏

本文记录了在开发过程中遇到的一个问题：当React组件卸载后，定时器未能停止导致轮询无法结束。通过引入useRef Hook，实现了在组件卸载时正确清理定时器，从而解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发记录-20220328

原实现方式

import { useRef, useState } from 'react'

export default function Page() {
	const [timerId, setTimerId] = useState(null)

	useEffect(()=>{
		const timerId = setInterval(()=>{
			// 异步获取逻辑
		}, 时间间隔)
		setTimerId(timerId)
		return ()=>{
			timerId && clearInterval(timerId)
		}
	},[])

	return <>页面结构...</>
}

出现问题：组件卸载后，定时器未停止（轮询结束不了）

修改后的实现方式

import { useRef, useEffect } from 'react'

export default function Page() {
	const timeIdRef = useRef()

	useEffect(()=>{
		const timerId = setInterval(()=>{
			// 异步获取逻辑
		}, 时间间隔)
		// 保存当前timeId
		timeIdRef.current = timerId
		return ()=>{
			timeIdRef.current && clearInterval(timerIdRef.current)
		}
	},[])

	return <>页面结构...</>
}