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

开发记录-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(()=>{
    // 异步获取逻辑}, 时间间隔)// 保存当前timeIdtimeIdRef.current = timerIdreturn ()=>{
    timeIdRef.current && clearInterval(timerIdRef.current)}},[])return <>页面结构...</>
}