React 函数组件中无法清除定时器问题

问题：

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

原因：

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

解决方法：

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

// home.jsx
var timer = null;  //定义在函数组件外面
const Home = (props) => {
    const [posiy, setPosy] = useState(0);

    timer = setInterval(() => {
        console.log('定时器')
    }, 5000);

    return (
        <div>定时器</div>
    )
}
export default Home;

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

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

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

//把定时器的标识用 useRef 保存起来

import React, { useState, useEffect, useRef } from 'react';
let intervalHandle = useRef();

//创建时

intervalHandle.current = setInterval(() => {
  console.log(new Date());
}, 1000);


//清除时

clearInterval(intervalHandle.current);

//组件卸载时清除

useEffect(() => {
    return () => {
        // 清除定时器
        clearInterval(intervalHandle.current);
    };
  }, []);