问题：

在离开当前组件页面后，清除定时器，定时器的标识会在一瞬间变为 undefined , 但立马就会又重新开始执行定时器，而且定时器标识不变。

原因：

函数组件的本质是一个函数，而在在一个局部函数中，函数每一次执行，都会在把函数的变量重新生成一次。

解决方法：

方法一：将定时器标识变量定义在函数组件外部（全局环境中）

let time = null;  //定义在函数组件外面
const Time:FC<Props> = (props) => {
    time = setInterval(() => {
        console.log('定时器')
    }, 5000);

}
export default Time  

方法二：使用 useRef 创建一个变量

useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量。

在 useRef 创建的 ref 仿佛就像外部定义的一个全局变量，不会随着组件的更新而重新创建。但组件销毁，它也会消失，不用手动进行销毁。也就是说 useRef 创建的 ref 并不会随着组件的更新而重新构建。由于这个特性，在使用 react-hook 的时候，可以使用useRef来存储常量。

import { useEffect, useRef } from 'react'

//把定时器的标识用 `useRef` 保存起来
let time = useRef()

//组件卸载时
useEffect(() => {
    return () =>  clearInterval(time.current)
}, [])

//创建时
time.current = setInterval(() => {
  console.log(new Date())
}, 1000)

//清除时
clearInterval(time.current);