小记：使用Hooks写了个定时器

计时器：

组价加载开始倒计时； 组件销毁需要清除倒计时，防止内存泄漏；

需要用到hooks的状态管理 useState 来及时更新ui； 用到setInterval来实现计时功能；

错误写法：

const [count, setCount] = useState(6);  // 2 倒计时

useEffect(()=>{
  // 3 创建倒计时
  timer = setInterval(() => {
    console.log(`count`, count) 
    // 因为是闭包，所以每次拿到的都是原来的数据， 
    // 所以每次使用setContent 需要使用函数来获取当前的 count
    setCount(count-1)
  }, 1000)
  // 4 组件销毁 清楚倒计时
  return ()=>{
    clearInterval(timer)
  }
},[])

正确写法一：

import { useEffect, useState } from "react"
let timer = null; // 1 计时器
const Reject = (props) =>{
  const [count, setCount] = useState(6);  // 2 倒计时
  
  useEffect(()=>{
    // 3 创建倒计时
    timer = setInterval(() => {
      setCount(n => {
        if (n) { // 3.1 倒计时每秒减少1
          return n - 1
        } else { // 3.2 倒计时为0时，清空倒计时
          clearInterval(timer)
          return 0
        }
      });
    }, 1000)
    // 4 组件销毁 清楚倒计时
    return ()=>{
      clearInterval(timer)
    }
  },[])
  
  return <div>
    页面不存在，{count}s后返回；
  </div>
}
export default Reject;

正确写法二、单独提出去个函数也行

import { useEffect, useState } from "react"
let timer = null; // 1 计时器
const Reject = (props) =>{
  const [count, setCount] = useState(6);  // 2 倒计时

  useEffect(()=>{
    setTimer() // 调用函数
    // 4 组件销毁 清楚倒计时
    return ()=>{
      clearInterval(timer)
    }
  },[])

  const setTimer = () =>{
    // 3 创建倒计时
    timer = setInterval(() => {
      setCount(n => {
        if (n) { // 3.1 倒计时每秒减少1
          return n - 1
        } else { // 3.2 倒计时为0时，清空倒计时
          clearInterval(timer)
          return 0
        }
      });
    }, 1000)
  }
  
  return <div>
    页面不存在，{count}s后返回；
  </div>
}
export default Reject;