react+hooks的定时器问题

1.使用场景：当页面需要实时获取当前时间时常常使用定时器来获取

import { useEffect, useState } from "react";
const Time =()=>{
  const [date,setDate]=useState("");
  useEffect(()=>{
    let timer=setInterval(()=>{
      setDate(new Date().getSeconds());
      console.log("定时器开始了");
    },1000)
  },[])

  return(
    <div>
      {date}
    </div>
  )
}
export default Time

如果切换到其他页面，不清除定时器的时候控制台会出现报错，翻译过来就是“无法对已卸载的组件执行反应状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。若要修复，请取消useffect清除函数中的所有订阅和异步任务。在time这个组件”

解决方法：1.使用return清除副作用

  useEffect(()=>{
    let timer=setInterval(()=>{
      setDate(new Date().getSeconds());
      console.log("定时器开始了");
      // console.log(num+1)
    },1000)
    return ()=>{
     clearInterval(timer)
    }
  },[])

2.使用官网例子

 const interValRef=useRef()
  useEffect(()=>{
    const id=setInterval(()=>{
      console.log("定时器开始了")
    },1000);
    interValRef.current=id;
    return()=>{
      clearInterval( interValRef.current)
    }
  },[])