react+hooks的定时器问题_react hook 定时请求-优快云博客

本文介绍了在React应用中使用Hooks时，如何正确管理和清除定时器以防止内存泄漏。通过示例展示了两种解决方法：1) 在useEffect的返回函数中清除定时器；2) 使用useRef存储定时器ID并在清理阶段清除。

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)
    }
  },[])