开发记录-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 <>页面结构...</>
}